Использование data-* атрибутов

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

Синтаксис HTML

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

html

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

Доступ в JavaScript

Чтениеdata-атрибутов вJavaScript осуществляется также просто. Для этого можно использовать методgetAttribute() с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объектdataset.

Чтобы получитьdata-атрибут можно взять свойство объектаdataset с именем, равным части имени атрибута послеdata- (обратите внимание, что дефисы в имени преобразуются в camelCase).

var article = document.getElementById('electriccars');article.dataset.columns // "3"article.dataset.indexNumber // "12314"article.dataset.parent // "cars"

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

Доступ в CSS

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

css

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

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

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-атрибутам необходимо осуществлять черезgetAttribute(). Также,производительность чтенияdata-атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использованиеdataset ещё медленнее, чем чтение данных сgetAttribute().

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