Разработка сайтов, создание сайтов
главная / HTML / Пользовательские атрибуты в HTML

Пользовательские атрибуты в HTML

Иногда возникает необходимость связать с HTML элементом дополнительные данные, с которыми потом будет работать JavaScript. Простое и очевидное решение — добавить новый атрибут, но с ним не согласен валидатор. Как тут быть?

Решение очевидно, отправить старичка на пенсию и посмотреть в будущее. В HTML5 мы можем объявить любой атрибут с тем лишь условием, что его имя должно начинаться на data-:

<div data-example="Пример атрибута" data-targets=".content count"></div>


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

<!DOCTYPE html>

Но он же еще только в черновике? CSS3 тоже в черновике, но никому это не мешает использовать готовые элементы. Как некоторые любят говорить «Хватит тормозить развитие веб». Для валидных HTML 4.01 документов переход на HTML5 в большинстве случаев сводится к смене доктайпа. С XHTML несколько сложнее, нужно использовать Content-Type: application/xhtml+xml (отдавать XHTML5 с Content-Type: text/html для обработки HTML парсером нельзя), что приводит к столкновению с реальным миром, многие браузеры его не поддерживают, а некоторые, даже не собираются, хорошее решение этой проблемы не использовать XHTML.

Самое замечательное в этом нововведении то, что это не нововведение, а обычный атрибут, в HTML5 он просто стандартизируется.

<p id="attribute-test" data-example="Пример атрибута"></p>

<script type="text/javascript">
 // прямой доступ к атрибуту с данными
 // работает во всех браузерах
 var attributeTest = document.getElementById('attribute-test');
 attributeTest.innerHTML = attributeTest.getAttribute('data-example');
</script>

Для упрощения доступа к таким данным в HTML5 вводится DOM атрибут dataset, но браузерами он пока не поддерживается:

<p id="dataset-test" data-test="Поддерживается атрибут dataset">
 Атрибут dataset не поддерживается
</p>

<script type="text/javascript">
 // удобный доступ к данным через dataset
 // браузерами пока не поддерживается
 var datasetTest = document.getElementById('dataset-test');
 if(datasetTest.dataset) {
 datasetTest.innerHTML = datasetTest.dataset.test;
 }
</script>


Источник: designformasters.info
КОНТАКТЫ
г. Екатеринбург
info@vismech.ru


текущее:
Таблица сущностей HTML 4.0
Определение наличия Flash-plugin
Язык SQL

НОВОСТИ
2011 г., «VisMech.ru»