book51.ru

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
======Использование атрибутов данных======

HTML разработан с учетом расширяемости данных, которые должны быть связаны с определенным элементом, но не обязательно должны иметь какое-либо определенное значение. [[software:development:web:docs:web:html:global_attributes:data|data-* атрибуты]] позволяют нам хранить дополнительную информацию о стандартных семантических элементах HTML без других хаков, таких как нестандартные атрибуты или дополнительные свойства в DOM.

=====Синтаксис HTML=====

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

<file html HTML>
<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  …
</article>
</file>

=====Доступ к 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 (верблюжий регистр)]] ).

<file JavaScript JavaScript>
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"
</file>

Каждое свойство представляет собой строку и может быть прочитано и записано. В приведенном выше случае настройка ''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() функции]]:

<file CSS CSS>
article::before {
  content: attr(data-parent);
}
</file>

Вы также можете использовать [[software:development:web:docs:web:css:attribute_selectors|селекторы атрибутов]] в CSS для изменения стилей в соответствии с данными:

<file CSS CSS>
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
</file>

Вы можете увидеть, как все это работает вместе, в этом примере [[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)