Атрибут data в HTML


Содержание

Атрибут data в HTML

Атрибуты data-* используются для хранения пользовательских данных, закрытых для страницы или приложения.

Атрибуты data-* дают нам возможность встраивать пользовательские атрибуты данных во все элементы HTML.

Сохраненные (пользовательские) данные можно затем использовать в JavaScript страницы, чтобы создать более привлекательный пользовательский интерфейс (без вызовов AJAX или запросов к базам данных на стороне сервера).

Атрибуты data-* состоят из двух частей:

  1. Имя атрибута не должно содержать прописных букв и должно быть по крайней мере один символ длиной после префикса «data-«
  2. Значением атрибута может быть любая строка

Примечание: Пользовательские атрибуты с префиксом «data-» будут полностью игнорироваться агентом пользователя.

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает этот атрибут.

Атрибут data в HTML

До создания HTML5 работать с атрибутами в HTML элементах, мягко говоря, не доставляло удовольствия. Приходилось использовать такие атрибуты, как rel или class . А некоторые разработчики даже создавали свои атрибуты.

Но дело координально изменилось когда HTML5 предоставил нам возможность использования своих data атрибутов. Теперь довольно легко можно сохранять дополнительные данные стандартными средствами.

Как же работают дата атрибуты?

Название говорит само за себя. Дата атрибуты хранят в себе какие-то данные, заданные вами. Они всегда начинаются с приставки data- и заканчиваются чем то более понятным для разработчика (по спецификации допускаются только символы нижнего регистра и дефисы). Элемент может содержать в себе любое количество дата атрибутов.

Пример использования атрибутов для хранения данных о пользоватле:

Конечно, эти данные не слишком помогают конечному пользователю, так как он их попросту не видит, но дата атрибуты очень широко используются в современных веб технологиях.

Приведем пример кнопки для удаления чего-либо на вашей странице:

Все необходимые параметры у вас под рукой и готовы для отправки в скрипт бекэнда. Никаких больше rel атрибутов или обработки ID или необходимого действия из других атрибутов.

Что можно хранить?

Стоить помнить только одно правило, в дата атрибутах нельзя хранить объекты. То есть, можно, если их предварительно сериализовать. Сейчас просто запомните, что, впринципе, хранить можно только строковые данные.

Чтение/запись атрибутов средствами javascript

Вернемся к примеру с кнопкой и посмотрим как нам получить доступ к нужным атрибутам.

Довольно просто, не так ли? Теперь просто передавайте параметры cmd и id вашему приложению и выполняйте необходимый ajax запрос.

Чтение/запись дата атрибутов при помощи jQuery.

Приведем аналог на jQuery:

Не путайте с методом data() . Хотя у них есть что-то общее, в целом это абсолютно разные вещи. Даже если вы не полностью знакомы с этими методами, просто используйте attr() .

Использование dataset API

HTML5 даже предлагает нам API для работы с data атрибутами, хотя IE10 и ниже не поддерживает его.

Опять таки пример с кнопкой, но на этот раз при помощи dataset API :

Обратите внимание на отсутсвие приставки data и дефисов. Так же как и при работе со свойтсвами CSS в JavaScript вам потребуется «горбатый» регистр. Dataset API переводит имена атрибутов таким образом что data-some-attribute-name в HTML превращается в dataset.someAttributeName в JavaScript.

Что можно делать с дата атрибутами

Приведенные примеры — это только фундамент. Вы можете выполнять гораздо более сложные операции с дата атрибутами. Давайте рассмотрим несколько примеров.

Фильтрация

Допустим вы работаете со списком элементов и вам необходимо отфильтровать их по ключевому слову. Разместите ключевые слова в data атрибутах и при помощи небольшого итерационного скрипта обработайте их.

Пример “на коленке”:


Стилизация

Конечно стили лучше применять посредством классов, но тоже самое можно сделать и при помощи data атрибутов. Вот так можно применить стиль к элементам, имеющим определенный data атрибут, независимо от его значниния. Сначал взглянем на HTML:

Но как же учитывать значение атрибута? Вот так можно применить стиль ко всем элементам с атрибутом data-warning чье значение содержит в себе слово error :

Настройка

Известный фреймворк Bootstrap применяет data атрибуты для настройки своих JavaScript плагинов. Пример всплывающего окна:

Лучший способ хранить данные

Дата атрибуты очень распространены в веб технологиях. Но самое важное то, что они полностью поддерживаются старыми браузерами и все глубже и глубже проникают в веб стандарты. А так стандарт HTML уже утверждён, то работать с ними можно уже сегодня и не бояться, что вдруг они пропадут завтра.

Я привел несколько широко распространенных примеров использования дата атрибутов. Хотите продемонстрировать другие способы их применения? Использовали их раньше и хотите поделиться опытом? Оставляйте свои комментарии!

Можно ли изменить data атрибут в html через css?

Всем привет!
Есть дата атрибут в html, который связан с js. Необходимо его изменить при определенном медиа запросе. Как быть?

Нужно поменять 1s на 2s через css при определенной ширине экрана.

Пока вижу решение только в создании дубликата тега с дата 2s + display: none при определенном медиа запросе.
Хотелось бы решение попроще, так как в самой верстке тег намного больше, чем указал тут в примере.
Спасибо!

Что такое пользовательские атрибуты данных (data) в HTML5 и как их использовать

Сегодняшняя статья посвящена рассмотрению новшества в HTML5 – пользовательских атрибутов данных (data). Вы узнаете, что такое атрибуты data , зачем они нужны, и как их можно использовать.

Зачем нужны пользовательские атрибуты данных?

Очень часто разработчикам нужно хранить определенную информацию, связанную с различными элементами DOM. Зачастую такая информация больше нужна именно программистам, а не посетителям сайта. Допустим, вам нужно определять тип блока DOM ( section , footer и т.д.) и присваивать ему идентификатор, чтобы позднее добавлять к нему определенные CSS стили.

Илон Маск рекомендует:  Что такое код mcal_append_event

Это легко можно сделать и с помощью атрибутов id или class . Но, иногда, такого решения мало. Ввиду следующих ограничений:

  • Атрибут class не предназначен для хранения расширенных данных. Его основная цель – присваивать CSS стили определенному набору элементов.
  • Если нам нужен дополнительный объем информации, мы вынуждены добавлять новый класс к элементу. Это может затруднять синтаксический анализ данных в JavaScript.
  • Если имя класса начинается с цифр, позже это затруднит присвоение стилей, поскольку придется либо экранировать числа, либо использовать другие селекторы атрибутов в таблице стилей.

Чтобы решить эти задачи, в HTML5 были введены пользовательские атрибуты данных. Все атрибуты элемента, название которого начинается с data- , являются атрибутами данных. Эти атрибуты данных можно использовать и для присвоения стилей элементам DOM.

Синтаксис пользовательских атрибутов данных в HTML5

Название атрибута данных всегда начинается с data- . Например:

Помимо префикса data- , название допустимого пользовательского атрибута данных может содержать только латинские буквы, цифры, дефис (), точку (.), двоеточие (:) или подчеркивание (_). Для названия нельзя использовать заглавные буквы.

Замечания по использованию атрибутов данных:

  • Во-первых, данные, хранящиеся в этих атрибутах, должны иметь тип string . Все, что может быть закодировано в виде строки, также может храниться в атрибутах данных. Если нужно выполнить преобразование типов, используйте для этого JavaScript.
  • Во-вторых, атрибуты данных должны использоваться только тогда, когда нет других соответствующих HTML-элементов или атрибутов. Например, неуместно хранить класс элемента в атрибуте data-class .
  • В-третьих, элемент может содержать любое количество атрибутов данных с любым допустимым значением.

Теперь давайте перейдем к рассмотрению практического применения атрибутов данных и узнаем, как получить доступ к их значениям в CSS и JavaScript.

Доступ к атрибутам данных в CSS

Вы можете использовать атрибуты данных в CSS для стилизации элементов с помощью селекторов атрибутов. Вы также можете показать информацию, хранящуюся в атрибуте данных, пользователям (во всплывающей подсказке или другим способом) с помощью функции attr() jQuery.

Если взять пример с типами блоков, вы можете по-разному стилизовать их фоновый цвет. Пример селектора в CSS:

Создание всплывающих подсказок с атрибутом data

Вы можете использовать всплывающие подсказки, чтобы показать пользователям некоторую дополнительную информацию, связанную с элементом. Информация, которую вы хотите показать, может храниться в атрибуте data-tooltip .

Затем вы можете показывать эти данные пользователю с помощью псевдоэлемента ::before .

Доступ к атрибутам данных с помощью JavaScript

Вы можете получить доступ к атрибутам данных в JavaScript с помощью различных способов.

Способ №1: Использование getAttribute и setAttribute


Метод getAttribute возвращает либо пустое значение ( null ), либо пустую строку, если данный атрибут не существует. Вот пример использования этого метода:

Вы можете использовать метод setAttribute , чтобы изменить значение существующих атрибутов или добавить новые атрибуты.

Способ №2: Использование jQuery

Вы также можете использовать метод jQuery data() для доступа к атрибутам данных элемента. До версии jQuery 1.6 использовался следующий код для доступа к атрибутам данных:

Начиная с версии jQuery 1.6 используется версия атрибутов данных в формате camelCase (ВерблюжийРегистр). Теперь вы можете сделать то же самое, используя следующий код:

Краткий итог

В сегодняшней статье мы рассмотрели основные моменты, которые вам нужно знать об атрибутах данных ( data- ) в HTML5. Помимо создания всплывающих подсказок и стилизации элементов с помощью селекторов атрибутов, вы можете использовать атрибуты данных для хранения и отображения пользователям различных данных, таких как уведомление о непрочитанных сообщениях и массы других.

HTML глобальный атрибут data-*

Определение и применение

Глобальный атрибут data-* используется для хранения пользовательских данных (возможность вставить атрибут с пользовательскими данными к любому HTML элементу). Данный атрибут даёт возможность, используя JavaScript предоставить более расширенные возможности для пользователя, не прибегая к запросам на стороне сервера.

Имя атрибута не должно содержать заглавные буквы, а также должно содержать по крайней мере один символ после приставки data-. Значением атрибута может быть любая строка.

Поддержка браузерами и значения атрибута

Значение Chrome Firefox Opera Safari IExplorer Edge
value 4.0 2.0 9.6 3.1 5.5 12.0

Пример использования

Кликни по элементу для подробной информации:

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

jQuery — Data

Статья, в которой рассмотрим, какие в jQuery существуют методы для работы с data-атрибутами и внутренним хранилищем Data.

Назначение HTML 5 data-атрибутов

В HTML5 к любому элементу документа можно добавить пользовательские атрибуты. Назначение данных атрибутов веб-разработчик определяет самостоятельно, но в большинстве случаев они предназначены для хранения некоторой информации, которую затем можно использовать в скриптах JavaScript. Пользовательские атрибуты всегда начинаются с data-* :

Работа с data-атрибутами посредством методов attr и removeAttr

Выполнение действий над атрибутами data в jQuery обычно осуществляется с помощью методов: attr и removeAttr .

Например, выведем значение data-атрибутов элемента div с в консоль браузера:

Данный метод (attr) возвращает значение data-атрибута в виде строки.

Например, добавим атрибут data-year к вышеприведённому элементу:

Более детально разобраться, как работать с данными методами можно в статье jQuery — Работа с атрибутами HTML элементов.

jQuery — data-атрибуты и метод data

Метод data используется в jQuery не для общения с data-атрибутами. Его основное предназначение — это чтение данных из внутреннего хранилища jQuery ( $.cache ) или запись в него некоторой информации.

Внутреннее хранилище jQuery — это некий контейнер, в который можно помещать произвольную информацию, связанную с определённым DOM-элементом текущей страницы.

Но, тем не менее, данный метод может выполнять чтение HTML5 data-атрибутов, и помещать их во внутреннее хранилище. Это случается только в том случае, если в хранилище jQuery нет ключа с именем, равным имени data-атрибута. В противном случае вы получите значение из хранилища $.cache .

Таким образом работать с data-атрибутами посредством метода data имеет смысл только в том случае, если дальнейшая работа с ними будет вестись через хранилище jQuery.

Пример, в котором рассмотрим, как метод data работает с data-атрибутом:

В методе data ключ соответствует имени data-атрибута без приставки data- .

Кроме этого, если в окончании имени data-атрибута (после data- ) содержится дефисы («-«), то при обращении к нему с помощью метода data буквы стоящие перед дефисом должны быть заменены на заглавные, а сами дефисы убраны. Например, имя атрибута data-last-name должно быть указано в методе data как lastName .

Ещё один момент при работе с методом data заключается в том, что когда jQuery разбирает значение data-атрибута, то он пытается привести его значение (строку) к соответствующему типу JavaScript (булевскому значению, числу, объекту, массиву или null ). Например, значение «420» преобразуется в число 420. Если значение data-атрибута является объектом (начинается с » < ") или массивом (начинается с " [ "), то jQuery использует для разбора значения метод parseJSON . Это означает то, что содержимое атрибута должно иметь валидный JSON синтаксис (включая указания имен свойств в двойных кавычках). Но если попытка разобрать значение data-атрибута окажется не удачной, то оно останется в исходном в виде (т.е. в виде строки).


В итоге, метод data используется для выполнения следующих операций (в зависимости от указанных аргументов):

1. Получение значения ключа, связанного с элементом, из внутреннего хранилища jQuery:

Данный вариант метода data выполняет одно из следующих действий:

  • Чтение data-атрибута (имя которого соответствует указанному ключу) у первого элемента текущего набора, помещение его в хранилище, и возвращение значение этого ключа в качестве результата. Данное действие данный метод выполняет только в том случае, если у элемента есть data-элемент соответствующий ключу и в контейнере $.cache у данного элемента нет записи с указанным ключом.
  • Получает значение указанного ключа из хранилища jQuery. Это действие метод data выполняет только в том случае, если в $.cache у элемента есть указанный ключ.
  • возвращает значение undefined или пустой объект, если ни одно из вышеперечисленных действий не выполняется.

Если в результате выборки $(‘селектор’) возвращается несколько элементов, то данный метод возвращает значение только для первого элемента из полученного набора.

2. Получение всех данных в виде объекта JavaScript из хранилища jQuery, связанных с указанным элементом:

Более детально этот вариант метода data осуществляет следующее:

  1. Автоматически помещает data-атрибуты во внутреннее хранилище jQuery. Это действие он выполняет только для тех data-атрибутов, имён (ключей) которых нет на текущий момент в хранилище jQuery.
  2. Возвращает объект, состоящий из пар ключ-значение, связанных с текущим элементом.

3. Метод data применяют не только для чтения значений, но и для записи данных (ключ-значение), ассоциированных с некоторым элементом DOM во внутреннее хранилище jQuery.

Пример работы с методом data :

Методы для работы с data-хранилищем jQuery

Рассмотрим, какие ещё есть методы в jQuery для работы с data хранилищем кроме data .

Метод removeData

Данный метод предназначен для удаления данных, связанных с определённым элементом, из внутреннего хранилища jQuery. Данный метод не работает с data-атрибутами, поэтому все соответствующие ключу data-атрибуты удалены не будут.

Синтаксис метода removeData :

Удалим несколько пар ключ-значений, ассоциированных с элементом с из хранилища jQuery:

Функция $.data()

Данная функция выполняет действия аналогичные методу data , но в отличие от него работает на более низком уровне. Поэтому в большинстве случаев используют именно метод data , т.к. он является более удобным инструментом для работы с внутренним хранилищем jQuery.

Данная функция предназначена только для работы с jQuery хранилищем и в отличие от метода $(‘селектор’).data() не извлекает данные из HTML 5 data-атрибутов.

Синтаксис функции jQuery.data() :

Пример использования функции $.data() для сохранения информации, связанной с определённым DOM-элементом, в хранилище jQuery:

Функция $.hasData()

Эта функция определяет, имеет ли элемент, какие-либо данные во внутреннем хранилище jQuery.

Функция hasData возвращает true , если в хранилище есть какие-либо данные связанные с указанным элементом. В противном случае данная функция возвращает false .

Внутреннее хранилище $.cache используется также самой библиотекой jQuery. Один из примеров — это использование его для хранения кода обработчиков событий jQuery.

Пример использования функции hasData :

Разобраться, как работать в jQuery с data-атрибутами, которые появились в спецификации языка HTML5, можно в статье «jQuery – Методы attr и removeAttr». Эти методы ( attr и removeAttr ) используются не только для управления data-атрибутами, но и любых других атрибутов HTML элементов.

Атрибут data в HTML

Обязательный атрибут: нет.

Пример HTML: применение атрибута data

Поддержка версиями HTML

Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Да Да Да Да

Поддержка браузерами

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Да Да Да Да Да


Copyright © 2010-2015 seodon.ru Все права защищены.

С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.

HTML-атрибуты data-* для хранения параметров

В HTML5 были введены такие атрибуты тегов, как data-*. Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.

Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в JavaScript.

Например, для сохранения уникального номера блока часто пишут так:

А если нам нужно добавить еще один класс для каждого элемента? Или модификатор для отдельных? Да, конечно, можно обрезать регуляркой или другим костыликом на ваш вкус.

Как может показаться, тут можно задействовать id, но у нас могут быть блоки с одинаковым номером.

Иногда используют атрибут ‘rel’, но его можно использовать только для ссылок, хотя я видел и у других элементов. И опять же недостаток — мы можем записать в него только одно значение.

И вот нам на помощь спешат атрибуты data-*.

Плюшки

Можно присобачить к любому тегу и старые браузеры ничего не скажут против.
Можно в названии писать словосочетания: data-email- >Можно использовать любую строку в значении.
Можно использовать любой количество таких параметров для одного тега.

HTML тогда превратится в это:

Теперь самое интересное, а именно - работа в jQuery.
Находим: $(«[data-email- >Получаем значение: var email = $(selector).attr(«data-email-id»)

Самое интересное - это использование функции .data().
В версии 1.4.3 data() научилось получать наши атрибуты data-* вот таким образом:

Код: Выделить всё Развернуть var action = $(selector).data(‘action’); // close

Однако, в местах, критичных к скорости, ни в коем случае нельзя использовать $(selector).data(. );. Такая конструкция крайне тормознутая. Лучше всегда использовать data через функцию jQuery.data().
Пример:

Код: Выделить всё Развернуть jQuery.data(document.body, 'foo', 52);

Если же мы использовали словосочетание через дефис, то мы сможем получить его в camelCase:

$('#superid').data('fooBar'); // вернет 123

Кроме того, jQuery.data работает не только с DOM-элементами, а с абсолютно любыми объектами.
Например:

Один минус (а может и не минус) - это то, что в data() сохранится только изначальное значение (кешируется), и если мы изменим значение атрибута (например, через .attr(‘data-foo-bar’, 456)), то получая .data(«fooBar») увидим наше старое значение.

Но никто не мешает нам обновлять значение в 2х местах, если мы так захотим:

Код: Выделить всё Развернуть var baz = 150;
$(selector).data('fooBar', baz).attr('data-foo-bar', baz);

Хотя, если вам не нужно отслеживать код в, например, фаербаге, то можно и не обновлять .attr(), так как он влияет только на “визуальное” отображение.

В общем, как только вам понабиться сохранить дополнительные параметры в теге, то используйте data-атрибуты.

ps
Интересно, кто нибудь пробовал хранить в атрибутах json?
Хотя это, пожалуй, в ненормальное программирование.

Многие говорят про функцию jQuery.data(elem, key, [value])
Кто не знает, эта функция отличается от $(selector).data(key, [value])
Она позволяет привязывать данные к DOM-элементам любым объектам, а не к jQuery объектам. Да, она работает на 60% быстрей, но вот data-* атрибуты она не получает.

Не упомянуто что $(selector).data() - вернет объект со всеми data-* свойствами элемента.

Кодирование аудио. Подбор формата, кодера и параметров
Как определиться с кодеком? Выбор того или иного кодека зависит от конкретной задачи. А именно: 1. От оборудования и ПО, с помощью которого будет воспроизводиться звук. Т.е. от наличия поддержки того или иного формата аудио, а также качества воспроизведения (им желательно руководствоваться при выборе битрейта). 2. От объема памяти, который будет в.

Справочник по HTML. Версия 7.0 (Мержевич В.В.)
Описание: Справочник по CSS содержит подробное описание основных стилевых параметров с примерами их использования. Каждый параметр включает таблицу браузеров, в которой показано, насколько данный атрибут поддерживается тем или иным браузером. Приводится синтаксис использования стилевого атрибута, список аргументов и объектная модель. В большинстве случаев ре.

Вопрос по reactjs, html, javascript – что такое атрибут data-реактид в html?

Пока я просматривал HTML некоторых страниц, я заметил, что некоторые из них используют этот атрибут "данных reactid» лайк :

Что это за атрибут и какова его функция?

data-reactid это пользовательский атрибут, используемыйРеагировать на библиотеку JavaScript, Который разработан для использования с Facebook и Instagram.


@ adrianj98, почему неВы публикуете свой комментарий как ответ?

Обратите внимание, что все ответы объясняют, что такое пользовательские атрибуты даты, а не объясняют, что такое реакция данных. Он используется реагировать, чтобы иметь возможность ссылаться на объект DOM с экземпляром класса реагирующего элемента.

Интересно, если Facebook использует React, почему я ненайти данные-реактивы на их сайте?

s пользовательский атрибут html, но, вероятно, в этом случае он используется библиотекой Facebook React JS.

правило, с помощью JavaScript. Они не влияют на поведение сайта и являются удобным способом передачи данных для любых целей. Вот статья, которая может прояснить ситуацию:

Вы можете создать атрибут данных по префиксу data- для любого стандартного атрибута безопасной строки (буквенно-цифровой без пробелов или специальных символов). Например, data-id или в этом случае data-reactid

data-reactid Атрибут является настраиваемым атрибутом, который используется дляреагировать может однозначно идентифицировать его компоненты в DOM.

Это важно, потому что приложения React могут бытьотображается на сервере а также клиент. Внутренне React создает представление ссылок на узлы DOM, которые составляют ваше приложение (упрощенная версия приведена ниже).

Там'Невозможно разделить фактические ссылки на объекты между сервером и клиентом, и отправка сериализованной версии всего дерева компонентов потенциально дорогая. Когда приложение отображается на сервере и React загружается на клиенте, единственными данными, которые у него есть, являются data-reactid атрибутов.

Это должно быть в состоянии преобразовать это обратно в структуру данных выше. То, как это происходит с уникальным data-reactid атрибутов. Это называетсявздутие дерево компонентов.

Вы также можете заметить, что если React рендерит на стороне клиента, он использует data-reactid атрибут, даже если это неНе нужно терять ссылки. В некоторых браузерах он вставляет ваше приложение в DOM, используя .innerHTML затем он сразу раздувает дерево компонентов, что повышает производительность.

Другое интересное отличие состоит в том, что отрендеренные идентификаторы React на стороне клиента будут иметь инкрементный целочисленный формат (например, .0.1.4.3 ), в то время как к отображаемым серверам будет добавляться случайная строка (например, .loqi70ccu80.1.4.3 ). Это связано с тем, что приложение может отображаться на нескольких серверах иВажно, чтобы не было столкновений. На стороне клиента существует только один процесс рендеринга, что означает, что счетчики могут использоваться для обеспечения уникальных идентификаторов.

Реакция 15 использования document.createElement вместотак что клиент сделал разметку выигралЯ не могу больше включать эти атрибуты.

Огромный +1 к обновлению на React 15.

я искал этот последний раздел, спасибо за добавление этого. Я был смущен, почему моя разметка клиента неЯ могу включить его, как и раньше, но в другой части моего приложения оно было (оно отображалось на сервере).

@RationalDev Ах, этоинтересно. Как справиться с проблемой коллизий, если приложение отображается на нескольких серверах?

для React v15 +:> data-responsetid по-прежнему присутствует для содержимого, отображаемого на сервере, однако он намного меньше, чем раньше, и представляет собой просто счетчик с автоинкрементом.

Я не уверен. Я пытался выяснить, почему я получаю, например: data-Reactiont статический» стр. Соответствующий коммит, кажется, здесь:github.com/facebook/react/pull/5205/commits/.

Это должен быть принятый ответЕдинственный, кто отвечает на вопрос.

s атрибут данных HTML. Смотрите это для более подробной информации:http://html5doctor.com/html5-custom-data-attributes/

В основном этопросто контейнер ваших пользовательских данных, в то же время делая HTML-код действительным. Это data- плюс некоторый уникальный идентификатор.

Хотел бы процитировать Янкомментарий в моем ответе:

Это'Это просто атрибут (действительный) элемента, который вы можете использовать для хранения данных / информации о нем.

Затем этот код извлекает его позже в обработчике событий и использует его для поиска целевого выходного элемента. Он эффективно хранит класс div, где его текст должен быть выведен.

reactid это просто суффикс, вы можете иметь любое имя здесь, например:. data-Ayman

Если вы хотите найти разницу, проверьте скрипты в этомТАК отвечай и комментируй.

обратите внимание, что вы можете• используйте заглавные буквы в имени атрибута, согласно предоставленной вами ссылке.

Да, это ограничение немного вводит в заблуждение. Фактическое имя атрибута в самом DOM можетне может иметь заглавных букв, но атрибут, записанный в теге HTML, может, потому что все имена тегов и атрибутов автоматически переводятся в нижний регистрперечитайте все равно. Так что в HTML вы можете использовать заглавные буквы, но в JS это 'Все кончится строчными.w3.org/TR/2010/WD-html5-20101019/.

Что такое dataset? Привязка данных к элементам через data-атрибуты без jQuery.

Все атрибуты, название которых начинается с data- , валидны, согласно спецификации HTML5, и предназначены для привязки некого набора пользовательских данных к html-элементу.

Вы, наверняка, пользовались jQuery и знаете, как работает метод .data()

Свойство dataset появилось совсем недавно (спецификация) и выполняет такую же роль, только без jQuery. Оно позволяет из javascript получить доступ в режиме чтения и записи к атрибутам data-* , установленным для html-элемента.

Устанавливаемое значение поля dataset автоматически синхронизируется с html атрибутом соответствущего элемента.

Как и в случае с jQuery, название html-атрибута в форме data-one-two-three соответствует свойству dataset.oneTwoThree . Вот несколько примеров:

Несмотря на то, что dataset довольно молод, у него все очень неплохо с поддержкой браузерами:

Если же Вам необходимы ранние версии IE, обратите внимание на этот полифил

Илон Маск рекомендует:  Что такое код globalcompact
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
Автор материала: Admin [Профиль]
Блоги: 1542
Сообщения: 6097
Откуда: Москва