Допустимы ли пустые атрибуты данных HTML5? - PullRequest
Новая
       16

Допустимы ли пустые атрибуты данных HTML5?

104 голосов
/ 16 марта 2012

Я хотел бы написать простой плагин 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.

Ответы [ 4 ]

100 голосов
/ 16 марта 2012

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

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

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

41 голосов
/ 20 мая 2014

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

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

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

<input disabled>

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

<input disabled="">

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

Если вы обращаетесь к атрибуту через element.dataset:

  • Когда присутствует пустой атрибут, его значение равно "".
  • Когда атрибут отсутствует, вы получаете undefined.

Следовательно, вы не можете просто проверить как if (element.dataset.myattr), потому что он всегда будет false.

Вы можете и должны проверять логические атрибуты как if (element.dataset.myattr !== undefined).

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

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

1 голос
/ 22 апреля 2015

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

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

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

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

Похожие темы

...