Это старая версия документа!
Содержание
HTML глобальный атрибут: data-* (данные-*)
Глобальный атрибут data-* образует класс атрибутов, называемых пользовательскими атрибутами данных , которые позволяют обмениваться частной информацией между HTML и его представлением DOM с помощью сценариев.
Используется для хранения пользовательских данных, относящихся к конкретной странице или приложению.
Интерактивный пример
В данном примере к элементу <meter> добавляется атрибут data-description содержащий необходимый текст для вывода. Само отображение происходит с помощью псевдоэлемента ::after и свойства content, значением которого как раз и выступает функция attr().
Использование
Примечание
Имя атрибута должно обязательно начинаться с data-, дальше можно использовать латинские буквы в нижнем регистре, цифры и следующие символы: дефис (-), двоеточие (:), подчёркивание (_).
Примечание
Имена атрибутов трансформируются в переменные, к которым в дальнейшем можно обращаться и получать значения, по следующим правилам:
- data- удаляется;
- любой дефис идущий перед буквой удаляется, а буква за ним становится заглавной;
- любые другие буквы остаются неизменными.
Например, атрибут data-date-of-birth преобразуется в переменную dateOfBirth.
data-description превращается в description. data-full-description превращается fullDescription. data-description-of-tag превращается descriptionOfTag.
Синтаксис
<element data-*="значение">
<li contextmenu="changeFont" id="fontSizing">
Значения атрибута
- Значения: Определяет значение атрибута (в виде строки)
- Значение по умолчанию: Нет.
Применяется к тегам
<a>,
<abbr>,
<address>,
<area>,
<b>,
<bdo>,
<blockquote>,
<body>,
<button>,
<caption>,
<cite>,
<code>,
<col>,
<colgroup>,
<del>,
<dd>,
<dfn>,
<dir> ,
<div>,
<dl>,
<dt>,
<em>,
<embed>,
<fieldset>,
<form>,
<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>|]
[[software:development:web:docs:web:html:element:i|<i>,
<iframe>,
<img>,
<input>,
<ins>,
<kbd>,
<label>,
<legend>,
<li>,
<link>,
<map>,
<menu>,
<ol>,
<option>,
<p>,
<pre>,
<q>,
<s>,
<samp>,
<select>,
<span>,
<strong>,
<sub>,
<sup>,
<table>,
<tbody>,
<td>,
<textarea>,
<tfoot>,
<th>,
<thead>,
<tr>,
<ul>,
<var>
Доступность
Атрибут contextmenu устарел и будет удален из всех браузеров.