Html 空的 HTML5 数据属性是否有效?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9729080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:08:48  来源:igfitidea点击:

Are empty HTML5 data attributes valid?

htmlcustom-data-attributehtml5-data

提问by Adam

I'd like to write a simple jQuery plugin that displays inline modals under specified elements. My idea is for the script to auto-init based on data attributes specified on elements.

我想编写一个简单的 jQuery 插件,在指定元素下显示内联模式。我的想法是让脚本根据元素上指定的数据属性自动初始化。

A very basic example:

一个非常基本的例子:

<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>

I'm just wondering if data-modal-targetin the above example is valid, or does it have to be data-modal-target="true"? I don't care about anything crappier than IE9 etc, my only requirement is that it be valid HTML5.

我只是想知道data-modal-target上面的例子是否有效,还是必须有效data-modal-target="true"?我不在乎任何比 IE9 等更糟糕的东西,我唯一的要求是它是有效的 HTML5。

采纳答案by user

Valid, but they aren't boolean.

有效,但它们不是布尔值。

Custom data attributes specificationdoesn't mention any changes to empty attributes handling, so the general rules about empty attributesapply here:

自定义数据属性规范没有提到对空属性处理的任何更改,因此有关空属性一般规则适用于此处:

Certain attributes may be specified by providing just the attribute name, with no value.

In the following example, the disabledattribute is given with the empty attribute syntax:

<input disabled>

Note that empty attribute syntax is exactly equivalent to specifying the empty string as the value for the attribute, as in the following example.

<input disabled="">

某些属性可以通过仅提供属性名称而没有值来指定。

在以下示例中,disabled属性使用空属性语法给出:

<input disabled>

请注意,空属性语法完全等同于将空字符串指定为属性值,如下例所示。

<input disabled="">

So you are allowed to use empty custom data attributes, but special handling is needed to use them as boolean.

所以你可以使用空的自定义数据属性,但需要特殊处理才能将它们用作布尔值。

When you are accessing an empty attribute, its value is "". Since it's a falsy value, you can't just use if (element.dataset.myattr)to check whether an attribute is present.

当您访问空属性时,其值为""。由于它是一个假值,您不能仅用于if (element.dataset.myattr)检查属性是否存在。

You should use element.hasAttribute('myattr')or if (element.dataset.myattr !== undefined)instead.

您应该使用element.hasAttribute('myattr')if (element.dataset.myattr !== undefined)代替。



Lloyd's answer is wrong. He mentions link to boolean attributes microsyntax, but data-*attributes are not specified as boolean in the spec.

劳埃德的回答是错误的。他提到了布尔属性微语法的链接,但data-*属性在规范中没有指定为布尔值。

回答by Lloyd

Yes, perfectly valid. In your case, data-modal-targetwould represent a boolean attribute:

是的,完全有效。在您的情况下,data-modal-target将代表一个布尔属性:

2.4.2 Boolean attributes

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

2.4.2 布尔属性

元素上布尔属性的存在表示真值,不存在该属性表示假值。

回答by eew

Yes, it is valid syntax to omit value for a custom data attribute.

是的,省略自定义数据属性的值是有效的语法。

"Attributes can be specified in four different ways:

“可以通过四种不同的方式指定属性:

Empty attribute syntax Just the attribute name. The value is implicitly the empty string. [...]" https://developers.whatwg.org/syntax.html#attributes-0

空属性语法 只是属性名称。该值隐式为空字符串。[...]" https://developers.whatwg.org/syntax.html#attributes-0