From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../guide/html/using_data_attributes/index.html | 129 +++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 files/ru/web/guide/html/using_data_attributes/index.html (limited to 'files/ru/web/guide/html/using_data_attributes/index.html') diff --git a/files/ru/web/guide/html/using_data_attributes/index.html b/files/ru/web/guide/html/using_data_attributes/index.html new file mode 100644 index 0000000000..cef001e25a --- /dev/null +++ b/files/ru/web/guide/html/using_data_attributes/index.html @@ -0,0 +1,129 @@ +--- +title: Использование data-* атрибутов +slug: Web/Guide/HTML/Using_data_attributes +tags: + - Guide + - HTML +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +

HTML5 спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.

+ +

Синтаксис HTML

+ +

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

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Доступ в JavaScript

+ +

Чтение data-атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Чтобы получить data-атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным "5".

+ +

Доступ в CSS

+ +

Заметим, что data-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:

+ +
article[data-columns='3']{
+  width: 400px;
+}
+article[data-columns='4']{
+  width: 600px;
+}
+ +

Увидеть как это работает можно в примере на JSBin.

+ +

Data-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.

+ +

Проблемы

+ +

Не храните данные, которые должны быть видимы и доступны в data-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data-атрибутах.

+ +

Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset. Для поддержки IE 10 и более ранних версий получение доступа к data-атрибутам необходимо осуществлять через {{domxref("Element.getAttribute", "getAttribute()")}}. Также, производительность чтения data-атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute().

+ +

Тем не менее, для пользовательских метаданных, связанных с элементами, data-атрибуты являются отличным решением.

+ +

Поддержка в браузерах

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
caniuse
+

IE

+ 		+

Edge

+ 		+

Firefox

+ 		+

Chrome

+ 		+

Safari

+ 		+

Opera

+ 		+

iOS Safari

+ 		+

Opera Mini*

+ 		+

Android Browser

+ 		+

Chrome for Android

+
11+14+52+49+10.1+46+9.3+all4.4+59+
+ +

 

+ +

Тем не менее, для содержимого, которое не надо показывать это является отличным решением.

+ +

См. также

+ + -- cgit v1.2.3-54-g00ecf