======Использование атрибутов данных======
HTML разработан с учетом расширяемости данных, которые должны быть связаны с определенным элементом, но не обязательно должны иметь какое-либо определенное значение. [[software:development:web:docs:web:html:global_attributes:data|data-* атрибуты]] позволяют нам хранить дополнительную информацию о стандартных семантических элементах HTML без других хаков, таких как нестандартные атрибуты или дополнительные свойства в DOM.
=====Синтаксис HTML=====
Синтаксис прост. Любой атрибут любого элемента, имя атрибута которого начинается с, data-является атрибутом данных. Предположим, у вас есть статья и вы хотите сохранить дополнительную информацию, не имеющую никакого визуального представления. Просто используйте dataдля этого атрибуты:
…
=====Доступ к JavaScript=====
Считать значения этих атрибутов в [[software:development:web:docs:web:javascript|JavaScript]] также очень просто. Вы можете использовать [[software:development:web:docs:web:api:element:getattribute|getAttribute()]] их полное имя HTML, чтобы прочитать их, но стандарт определяет более простой способ: [[software:development:web:docs:web:api:domstringmap|DOMStringMap]] вы можете прочитать их через [[software:development:web:docs:web:api:htmlelement:dataset|dataset]] свойство.
Чтобы получить ''data'' атрибут через ''dataset'' объект, получите свойство по части имени атрибута после ''data-'' (обратите внимание, что дефисы преобразуются в [[software:development:web:docs:glossary:camel_case|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".
=====CSS-доступ=====
Обратите внимание: поскольку атрибуты данных являются простыми атрибутами HTML, вы можете получить к ним доступ даже из [[software:development:web:docs:web:css|CSS]]. Например, чтобы показать родительские данные в статье, вы можете использовать [[software:development:web:docs:web:css:content|сгенерированный контент]] в [[software:development:web:docs:web:css|CSS]] с помощью [[software:development:web:docs:web:css:attr|attr() функции]]:
article::before {
content: attr(data-parent);
}
Вы также можете использовать [[software:development:web:docs:web:css:attribute_selectors|селекторы атрибутов]] в CSS для изменения стилей в соответствии с данными:
article[data-columns="3"] {
width: 400px;
}
article[data-columns="4"] {
width: 600px;
}
Вы можете увидеть, как все это работает вместе, в этом примере [[https://book51.ru/demo/code-docs/pages/global_attributes/JSBin.html|JSBin]].
Атрибуты данных также могут храниться для хранения постоянно меняющейся информации, например, результатов в игре. Используя здесь селекторы CSS и доступ к JavaScript, вы можете создавать отличные эффекты без необходимости писать собственные процедуры отображения. См. это [[https://www.youtube.com/watch?v=On_WyUB1gOk|видео]] с примером использования сгенерированного контента и переходов CSS ([[https://jsbin.com/atawaz/3/edit|пример JSBin]]).
Значения данных представляют собой строки. Числовые значения должны быть заключены в селекторе, чтобы стиль вступил в силу.
=====Проблемы=====
Не храните контент, который должен быть видимым и доступным, в атрибутах данных, поскольку вспомогательные технологии могут не получить к ним доступ. Кроме того, поисковые роботы не могут индексировать значения атрибутов данных.
=====Ссылки и дополнения=====
* Эта статья адаптирована из статьи [[https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/|«Использование атрибутов данных в JavaScript и CSS»]] на сайте hacks.mozilla.org .
* Пользовательские атрибуты также поддерживаются в SVG 2; см. [[software:development:web:docs:web:api:htmlelement:dataset|HTMLElement.dataset]] и [[software:development:web:docs:web:html:global_attributes:data|data-*]] для получения дополнительной информации.
* [[https://www.sitepoint.com/use-html5-data-attributes/|Как использовать атрибуты данных HTML]] (Sitepoint)