Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Использование 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().

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

См. также

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

Метки: 
 Внесли вклад в эту страницу: ultrinnan, SphinxKnight, lerniri, ArtiFisher, xoyk, BaNru
 Обновлялась последний раз: ultrinnan,