Поиск…


Синтаксис

  • <element data-custom-name="somevalue">

параметры

Значение Описание
SomeValue Задает значение атрибута (в виде строки)

Использование атрибута данных

HTML5 data-* атрибуты обеспечивают удобный способ для хранения данных в HTML - элементах. Сохраненные данные могут быть прочитаны или изменены с помощью JavaScript

<div data-submitted="yes" class="user_profile">
  … some content …
</div>
  • Структура атрибута data-* - data-* , т.е. имя атрибута data появляется после части data- . Используя это имя, можно получить доступ к атрибуту.

  • Данные в формате строки (включая json ) могут быть сохранены с использованием атрибута data-* .

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

Атрибуты данных были введены в HTML5, который поддерживается всеми современными браузерами, но старые браузеры до того, как HTML5 не распознают атрибуты данных.

Однако в спецификациях HTML атрибуты, которые не распознаются браузером, должны быть оставлены в покое, и браузер просто игнорирует их при рендеринге страницы.

Веб-разработчики использовали этот факт для создания нестандартных атрибутов, которые являются атрибутами, не входящими в спецификации HTML. Например, атрибут value в строке ниже считается нестандартным атрибутом, поскольку спецификации <img> не имеют атрибута value и не являются глобальным атрибутом:

<img src="sample.jpg" value="test" />

Это означает, что, хотя атрибуты данных не поддерживаются в старых браузерах, они все еще работают, и вы можете устанавливать и извлекать их с использованием тех же общих setAttribute getAttribute JavaScript и getAttribute , но вы не можете использовать новое свойство dataset которое поддерживается только в современных браузерах.



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow