Подробное объяснение пользовательских атрибутов data-* HTML5.

В атрибутах jQuery и prop упоминается, что неправильное использование свойства в версиях до IE9 приведет к утечкам памяти, а разница между атрибутом и свойством также очень неприятна. В HTML5 для настройки атрибутов добавляется метод data-*. так называемый data-* на самом деле представляет собой префикс data- плюс имя пользовательского атрибута. Данные можно хранить с использованием такой структуры. Использование data-* может решить текущую ситуацию, связанную с запутанными и неуправляемыми пользовательскими атрибутами.

Существует два метода настройки data-*, которые можно записать непосредственно в тегах HTML-элементов.

 <div id=test data-age=24> Нажмите здесь </div>

Возраст данных — это настраиваемый атрибут. Конечно, мы также можем управлять им через JavaScript. Элементы в HTML5 будут иметь атрибут набора данных, который представляет собой набор пар ключ-значение типа DOMStringMap.

 var test = document.getElementById('test'); test.dataset.my = 'Байрон';

При этом к элементу div добавляется пользовательский атрибут data-my. При использовании JavaScript для работы с набором данных следует обратить внимание на две вещи.

1. Нам необходимо удалить префикс data-* при добавлении или чтении атрибутов. Как и в приведенном выше примере, мы не используем форму test.dataset.data-my = 'Byron';.

2. Если имя атрибута также содержит дефис (-), его необходимо преобразовать в верблюжий регистр. Но если в CSS используется селектор, нам нужно использовать формат дефиса.

Добавьте контент в код прямо сейчас

 <style type=text/css> [data-birth-date] {background-color: #0f0; width:100pxmargin:20px;

 test.dataset.birthDate = '19890615';

Таким образом, мы установили пользовательский атрибут data-birth-date через JavaScript и добавили несколько стилей в элемент div в таблице стилей CSS, чтобы увидеть эффект.

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

 var test = document.getElementById('test'); test.dataset.my = 'Байрон'; test.dataset.birthDate = '19890615'; test.onclick = function () { alert(this.dataset.my + '' + this.dataset.age+' '+this.dataset.birthDate }

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

 var test = document.getElementById('test'); test.dataset.birthDate = '19890615'; test.setAttribute('age', 25); test.setAttribute('data-sex', 'male'); log(test.getAttribute('data-age')); //24 console.log(test.getAttribute('data-birth-date')); //19890516 console.log(test.dataset.age); //24 console.log(test.dataset.sex); //мужчина

Отсюда мы видим, что оба они устанавливают атрибуты в атрибуты (ерунда, иначе их можно назвать пользовательскими атрибутами), а это означает, что getAttribute/setAttribute может работать со всем содержимым набора данных, а содержимое набора данных является лишь подмножеством атрибутов. дело в именовании, но в наборе данных есть только атрибуты с префиксом data- (нет атрибута age=25).

Так почему же мы до сих пор используем data-*? Одним из самых больших преимуществ является то, что мы можем унифицированно управлять всеми пользовательскими атрибутами в объекте набора данных. Это очень удобно для перемещения по всему, не разбрасываясь, поэтому его по-прежнему полезно использовать.

Плохая новость заключается в том, что совместимость data-* браузера очень пессимистична.

1. Интернет Эксплорер 11+
2. Хром 8+
3. Фаерфокс 6.0+
4. Опера 11.10+
5. Сафари 6+

Среди них IE11+ просто ослепляет глаза моих друзей. Кажется, до полноценного использования этого атрибута еще далеко.

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