HTML5 Data Attributes (data-*)

наверх

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

Спасибо за внимание!

Подписывайтесь на рассылку 😉

Оригинал