Действительны ли пустые атрибуты данных HTML5?

115

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

Очень простой пример:

<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>

Мне просто интересно, data-modal-targetверен ли приведенный выше пример или он должен быть data-modal-target="true"? Меня не интересует что-либо более дрянное, чем IE9 и т. Д., Мое единственное требование - это валидный HTML5.

html custom-data-attribute html5-data Адам
источник
Я не мог найти, где для настраиваемых атрибутов данных требуется значение или нет; и я до сих пор не уверен, следует ли опускать значение или просто включить его на всякий случай. Спецификация W3C сбивает с толку (неудивительно). Я думаю, это может зависеть от сценария, в котором используются значения. (пример комментария продолжается ниже из-за ограничения длины).
goodeye
например, я использую подключаемый модуль, который имеет настраиваемые атрибуты данных со значениями по умолчанию: некоторые строки, некоторые логические значения (что заставляет меня искать этот вопрос). Булевы данные могут быть разными: истинно или ложно по умолчанию; он выполняет проверку, существует ли он или имеет значение. Он проверяет, является ли значение истинным или пустым (для истинного) или ложным. Но проверка на пустоту явно указана в коде; это не «встроенный». И он не проверяет имя атрибута, например data-abc = "data-abc", как того требует логический атрибут; это вызывает ошибку.
goodeye

Ответы:

52

Допустимые, но не логические.

В спецификации настраиваемых атрибутов данных не упоминаются какие-либо изменения в обработке пустых атрибутов, поэтому здесь применяются общие правила для пустых атрибутов :

Некоторые атрибуты можно указать, указав только имя атрибута без значения.

В следующем примере disabledатрибут задается с синтаксисом пустого атрибута:

<input disabled>

Обратите внимание, что синтаксис пустого атрибута в точности эквивалентен указанию пустой строки в качестве значения атрибута, как в следующем примере.

<input disabled="">

Таким образом, вам разрешено использовать пустые пользовательские атрибуты данных, но требуется специальная обработка, чтобы использовать их как логические.

Когда вы обращаетесь к пустому атрибуту, его значение равно "". Поскольку это ложное значение, вы не можете просто использовать его if (element.dataset.myattr)для проверки наличия атрибута.

Вы должны использовать element.hasAttribute('myattr')или if (element.dataset.myattr !== undefined)вместо.

Ответ Ллойда неверен. Он упоминает ссылку на микросинтаксис логических атрибутов, но data-*атрибуты не указаны как логические в спецификации.

пользователь
источник
«Обратите внимание, что синтаксис пустого атрибута в точности эквивалентен указанию пустой строки в качестве значения атрибута, как в следующем примере». это именно то, что я искал. В частности, параметру jQuery scriptAttrsне нравятся простые deferзначения, но он defer: ""должен помочь. Спасибо!
сфарбота
111

Да, совершенно верно. В вашем случае это data-modal-targetбудет логический атрибут:

2.4.2 Логические атрибуты

Наличие логического атрибута в элементе представляет истинное значение, а отсутствие атрибута представляет ложное значение.

Lloyd
источник
3
Ницца! Спасибо за ссылку, у меня обычно не хватает терпения пробираться через w3.org :)
Адам
4
Я не знаю, как опустить значение «превращает его в» логический атрибут - кажется, что логические атрибуты не произвольны; Думаю, есть их список. Возможно, не имеет значения, обрабатываются ли они как логические или пользовательские данные браузером / скриптом; но, возможно, это зависит от читающего его сценария.
goodeye
3
Я считаю, что это изменилось. Конечно, пример, который я использую в своем коде, обрабатывается не как логическое, а как пустая строка. Итак, тестирование if ($('p').data('modal-target'))не сработает: stackoverflow.com/questions/16864999/… .
Дерек Хендерсон
4
похоже, что это неправда, element.dataset.modalTargetприведет к пустой строке, которая является ложной (Chrome 32), такой же результат с jQuery
H1D
20
Похоже, это неправильное толкование спецификации. Раздел связывание описывает логические атрибуты, но не говорит , если атрибуты пользовательских данных могут быть атрибутами Boolean.
BoltClock
1

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

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

Пустой синтаксис атрибута Просто имя атрибута. Значение неявно является пустой строкой. [...] " https://developers.whatwg.org/syntax.html#attributes-0

ЭВП
источник
1

С одной стороны, он проходит валидатор 16.5.7 https://validator.w3.org/nu/#textarea :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>a</title>
</head>
<body data-asdf>
</body>
</html>

С другой стороны, HTML5 не говорит в спецификации data-атрибутов, что они являются логическими: https://www.w3.org/TR/html5/dom.html#custom-data-attribute, хотя он очень четко говорит, что для других логических такие атрибуты, как checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

Чиро Сантилли 郝海东 冠状 病 六四 事件 法轮功
источник