Использование data-* attributes

HTML5 спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определенного значения. data-* attributes позволяют нам хранить дополнительную информацию на стандартных, семантических элементах HTML, не загрязняя имя класса.

Синтаксис HTML

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

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

Доступ в JavaScript

Читать data attributes в JavaScript также легко. Вы можете использовать getAttribute() для чтения. Но стандарты предоставляют более простой способ: DOMStringMap вы можете читать свойства через dataset:

var article = document.querySelector('#electriccars'),
              data = article.dataset;
 
// data.columns -> "3"
// data.indexNumber -> "12314"
// data.parent -> "cars"

Каждое свойство является строкой (даже если опустить кавычки в HTML) и может быть прочитано и записано. В приведенном выше примере article.dataset.columns = 5 установит атрибуту data-columns значение "5".

Доступ в CSS

Заметьте, что data attributes - это обычные HTML-аттрибуты, мы даже можем получить доступ к этим атрибутам в CSS. Например, чтобы показать родительские данные о статье вы можете использовать генерируемый контент в CSS функцией attr:

article::before {
  content: attr(data-parent);
}

Вы также можете использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:

article[data-columns='3']{
  width: 400px;
}
article[data-columns='4']{
  width: 600px;
}

Вы можете увидеть как это работает в примере на JSBin.

Data-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои подпрограммы отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.

Проблемы

Не храните данные, которые должны быть видимы и доступны в data-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data-атрибутах.

Печально, что все простое и полезное в этой жизни не достается бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset. Для поддержки IE 10 и более ранние версий получать доступ к data attributes необходимо через getAttribute() . А также, производительность чтения data-attributes по сравнению с хранением этих данных в хранилище данных JS значительно хуже . Использование dataset еще медленнее, чем чтение данных с getAttribute().

Тем не менее, для содержимого, которое не надо показывать это является отличным решением.

См. также

This article is adapted from Using data attributes in JavaScript and CSS on hacks.mozilla.org.
How to use HTML5 data attributes (Sitepoint)