Использование data-* attributes
HTML5 добавил возможность хранить данные напрямую в html коде. При этом эти данные не будут видны пользователю. Data-* attributes позволяет нам хранить дополнительные данные в любых html элементах, не засоряя имена классов.
HTML ситаксис
Синтаксис очень простой. Например, у вас есть статья и вы хотите хранить некоторую дополнительную информацию, которая не должна быть показана. Используя data-* attributes можно сделать так:
<article
id="electriccars"
data-columns="3"
data-indexnumber="12314"
data-parent="cars">
...
</article>
Из примера видно, что все data-* attributes записываются следующим образом:
«data-» + «name-parameter»
Доступ из JavaScript
Чтение данных из data-* attributes так же очень простое. Мы можем использовать getAttribute() для чтения, но по стандарту определен более простой способ, а именно через свойство dataset:
var article = document.querySelector('#electriccars');
var data = article.dataset;
// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"
Значением каждого свойства является строка, мы можем получать и изменять данное значение. Если мы напишем article.dataset.columns = 5, то свойство data-columns изменится на 5.
CSS доступ
К data-* attributes мы можем так же просто получить доступ и через CSS. Например, чтобы получить data-parent атрибут статьи, вы можете использовать псевдоэлементы в CSS с attr():
article::before {
content: attr(data-parent);
}
Вы так же можете использовать селекторы в CSS, чтобы изменить стили в зависимости от значения data-*:
article[data-columns='3']{
width: 400px;
}
article[data-columns='4']{
width: 600px;
}
Посмотреть, как все это работать можно по ссылке.
Data attributes так может содержать изменяющуюся информацию, например, очки в игре. Используя CSS селекторы и доступ из JavaScript мы можем создавать классные эффекты без написания дополнительного кода для отображения. Смотрим видео. Ссылка на код.
Проблемы
Не храните данные в data-* attributes, которые должны быть показаны, так как вспомогательные технологии не могут получить к ним доступ. К тому же поисковые роботы не индексируют data-* attributes.
Печально, но IE не поддерживает dataset. Для чтения атрибутов необходимо использовать getAttribute(), для изменения значения setAttribute().
Скорость чтения data-attributes намного ниже по сравнению с хранением этих данных в JS. Использование dataset работает даже медленнее, чем getAttribute().
Спасибо за внимание!
Подписывайтесь на рассылку 😉
