Используйте атрибут data-* для внедрения пользовательских данных:
<ul>
<li data-animal-type="bird">Сова</li>
<li data-animal-type="fish">Лосось</li>
<li data-animal-type="spider">Тарантул</li>
</ul>
Попробуйте сами »
Описание data-*
Глобальные атрибуты data-* используются для хранения личных данных пользователя на странице или в приложении.
Глобальные атрибуты data-* дают нам возможность встраивать пользовательские атрибуты данных во все элементы HTML.
Затем сохраненные (пользовательские) данные можно использовать в JavaScript страницы для создания более привлекательного пользовательского интерфейса (без каких-либо вызовов Ajax или запросов к базе данных на стороне сервера).
Атрибуты data-* состоят из двух частей:
- Атрибут name не должн содержать заглавные буквы и должен содержать хотя бы один символ после префикса "data-"
- Значением атрибута может быть любая строка
Примечание: Пользовательские атрибуты с префиксом "data-" будет полностью проигнорирован агентом пользователя.
Поддержка data-*
Числа в таблице указывают первую версию браузера, которая полностью поддерживает атрибут.
| Атрибут | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
Синтаксис data-*
<element data-*="somevalue">
Значение атрибута data-*
| Значение | Описание |
|---|---|
| somevalue | Задает значение атрибута (в виде строки) |
Связанные страницы data-*
Учебник HTML: Атрибуты HTML
Справочник DOM HTML: Метод getAttribute() DOM HTML