Нужны ли атрибуты данных html5?

Мне интересно, действительно ли атрибуты данных html нужны значение, которое нужно применить?

Интересно, потому что часто все, что мы хотим знать, - это то, что атрибут фактически установлен как флаг. (конечно, мы могли бы использовать класс для этого, но реалистично, если вы не собираетесь стилизовать эти элементы по-другому, тогда флаги - больше данных, чем семантический элемент).

Прекрасным примером этого является то, что если мы хотим, чтобы ссылка прокручивала к ней цель вместо того, чтобы прыгать, наш код jQuery может выглядеть так:

$(document).on('click', '[data-scroll-link'], function(){/**do scroll**/});

Я знаю, что в google chrome достаточно, чтобы якорь отображался как

<a href="#bottom" data-scroll-link>Scroll to bottom</a>

Но это будет работать везде? и это даже допустимый HTML5 (я считаю, что это связано с автофокусом, атрибутами autoplay etc). или нам нужно:

<a href="#bottom" data-scroll-link="true">Scroll to bottom</a>

Ответ 1

Нет. Но...

Как обычно со всеми атрибутами, в сериализации application/xhtml+xml применяются правила XML, и атрибут должен иметь явное имя и (указанное) значение.

Итак, этот вопрос действительно связан с сериализацией text/html, поэтому соответствующая часть спецификации HTML5 Раздел 8 Синтаксис HTML

В частности, в attributes говорится:

Атрибуты могут быть указаны четырьмя различными способами:

где первый из них:

Синтаксис пустой атрибуты

Просто имя атрибута. Значение неявно является пустой строкой.

Необходимо понять, что значение имеет тип string, а не типа boolean.

Например, при <input id="cb" type="checkbox" checked> атрибут "checked" отражается как свойство true, так и false. Так

if (document.getElementById("cb").checked)

будет оценивать значение true для указанной выше разметки.

В отличие от <input id="cb" type="checkbox" data-checked>, атрибут "проверенный данными" отражается через объект набора данных в виде строки. Значение этого свойства - это пустая строка, которая в JavaScript ложна. Таким образом,

if (document.getElementById("cb").dataset.checked)

будет оценивать значение false для указанной выше разметки.

Чтобы выполнить эквивалентный тест, сравните значение для "not undefined". То есть.

if (document.getElementById("cb").dataset.checked !== undefined)

будет оценивать значение true для указанной выше разметки.

См. http://jsfiddle.net/GAxvW/

Ответ 2

Простой булевой тест для атрибутов элемента

Чтобы расширить превосходный ответ Alohci, следующий простой и гибкий способ проверить значение атрибута true boolean, предоставленное с использованием одного из трех стандартных соглашений HTML: <foo data-bar/>, <foo data-bar="true"/> или <foo data-bar="data-bar"/>.

var a = elem['data-bar'];
var aTrue = ( a != null && a !== false && a !== 0 && a.charAt(0) != 'f' &&
              a.charAt(0) != 'n' );

С приведенным выше кодом значение false, если undefined, или установлено на один из: f*, n*, 0 (без учета регистра) и true, если определено и установлено в один из: (empty string), (attribute name), (anything else).

Пустые строки оцениваются в true здесь, потому что атрибуты HTML без значений '', которые равны false в JS (и что-то вроде <foo disabled/> должно быть равно <foo disabled="true"/>). Вы можете использовать приведенный выше код для более общего тестирования строк, удалив != null && a !== false.