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

This translation is incomplete. Please help translate this article from English.

HTML5 is designed with extensibility for data that should be in the HTML, но не видно. data-* attributes позволяют нам хранить дополнительную информацию на стандартных, семантических элементах HTML, не загрязняя имя класса.

Синтаксис HTML

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

<article
  id="electriccars"
  data-columns="3"
  data-indexnumber="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.

Issues

Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers do not index data attributes' values.

Sadly enough it seems there is nothing that is so simple and useful that doesn’t come with a price. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии  не поддерживают dataset. Для поддержки IE 10 и более ранние версий получать доступ к data attributes необходимо через getAttribute() . А также, производительность чтения data-attributes по сравнению с хранением этих данных в хранилище данных JS значительно хуже . Использование dataset еще медленнее, чем чтение данных с getAttribute().

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

См. также

Метки документа и участники

Обновлялась последний раз: ArtiFisher,