HTML разработан с учетом расширяемости данных, которые должны быть связаны с определенным элементом, но не обязательно должны иметь какое-либо определенное значение. data-* атрибуты позволяют нам хранить дополнительную информацию о стандартных семантических элементах HTML без других хаков, таких как нестандартные атрибуты или дополнительные свойства в DOM.
Синтаксис прост. Любой атрибут любого элемента, имя атрибута которого начинается с, data-является атрибутом данных. Предположим, у вас есть статья и вы хотите сохранить дополнительную информацию, не имеющую никакого визуального представления. Просто используйте dataдля этого атрибуты:
<article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> … </article>
Считать значения этих атрибутов в JavaScript также очень просто. Вы можете использовать getAttribute() их полное имя HTML, чтобы прочитать их, но стандарт определяет более простой способ: DOMStringMap вы можете прочитать их через dataset свойство.
Чтобы получить data
атрибут через dataset
объект, получите свойство по части имени атрибута после data-
(обратите внимание, что дефисы преобразуются в Camel case (верблюжий регистр) ).
const article = document.querySelector("#electric-cars"); // The following would also work: // const article = document.getElementById("electric-cars") article.dataset.columns; // "3" article.dataset.indexNumber; // "12314" article.dataset.parent; // "cars"
Каждое свойство представляет собой строку и может быть прочитано и записано. В приведенном выше случае настройка article.dataset.columns = 5
изменит этот атрибут на «5».
Обратите внимание: поскольку атрибуты данных являются простыми атрибутами HTML, вы можете получить к ним доступ даже из CSS. Например, чтобы показать родительские данные в статье, вы можете использовать сгенерированный контент в CSS с помощью attr() функции:
article::before { content: attr(data-parent); }
Вы также можете использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данными:
article[data-columns="3"] { width: 400px; } article[data-columns="4"] { width: 600px; }
Вы можете увидеть, как все это работает вместе, в этом примере JSBin.
Атрибуты данных также могут храниться для хранения постоянно меняющейся информации, например, результатов в игре. Используя здесь селекторы CSS и доступ к JavaScript, вы можете создавать отличные эффекты без необходимости писать собственные процедуры отображения. См. это видео с примером использования сгенерированного контента и переходов CSS (пример JSBin).
Значения данных представляют собой строки. Числовые значения должны быть заключены в селекторе, чтобы стиль вступил в силу.
Не храните контент, который должен быть видимым и доступным, в атрибутах данных, поскольку вспомогательные технологии могут не получить к ним доступ. Кроме того, поисковые роботы не могут индексировать значения атрибутов данных.