Это старая версия документа!
Содержание
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-*="значение">
<div id="user" data-id="1234567890" data-user="Вася Пупкин" data-date-of-birth="01.04.1990">Пользователь</div>
Значения атрибута
- Значения: Определяет значение атрибута (в виде строки)
- Значение по умолчанию: Нет.
Применяется к тегам
<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 устарел и будет удален из всех браузеров.