do html5数据属性需要一个值？ [英] Do html5 data attributes need a value?

问题描述

我想知道html数据属性是否真的需要应用一个值？

我不知道这是因为我们经常想知道的是如果属性实际设置作为标志。 （确实我们可以使用一个类，但实际上，除非你要对这些项目进行不同的风格设置，那么标记比语义项目更多的数据）。

例如，如果我们想要一个链接滚动到它的目标，而不是跳跃我们的jQuery代码可能看起来像：

  $文档）.on（'click'，'[data-scroll-link']，function（）{/ ** do scroll ** /}）; 
 

我知道在google chrome它足够的锚点显示为

 < a href =＃bottomdata-scroll-link>滚动到底部< / a> 
  

但是它会在任何地方工作吗？甚至是有效的HTML5（我相信它是由于autofocus，autoplay等属性）。或者我们需要：

 < a href =＃bottomdata-scroll-link =true> Scroll到底部 
  




解决方案

否。但是...

与所有属性相同，在 application / xhtml + xml 序列化中，XML规则应用和属性必须有明确的名称和（引用）值。

所以这个问题真的是关于 text / html 序列化，因此HTML5规范的相关部分为第8部分HTML语法

特别是在属性，它说：

属性可以以四种不同的方式指定： / p>

其中第一个是：

空属性语法

   只是属性名称。该值是隐式的空字符串。

有必要了解，虽然该值是字符串类型，而不是布尔类型。 / p>

例如，使用< input id =cbtype =checkboxchecked> 属性由true或false属性反映。

  if（document.getElementById（cb）。checked）
  

会将上述标记评为真实。

，< input id =cbtype =checkboxdata-checked> ，data-checked属性通过数据集对象反映为字符串。此属性的值是空字符串，在JavaScript中是falsey。所以，

  if（document.getElementById（cb）。dataset.checked）
  
 
 
 
  
 >要进行等效测试，请比较未定义的值。 Ie 
  if（document.getElementById（cb）。dataset.checked！== undefined）
  
 
 
 
会对上述标记求值 true 。
 
 
 
请参阅 http://jsfiddle.net/GAxvW/  
 
I am wondering if html data attributes actually need a value to be applied?

I wonder this because often all we want to know is if the attribute is actually set to act as a flag. (sure we could use a class for this; but realistically unless you are going to style these items differently then the flags are more data than a semantic item).

A perfect example of this is if we want a link to scroll to it's target instead of jumping our jQuery code might look like:
$(document).on('click', '[data-scroll-link'], function(){/**do scroll**/});
I know in google chrome it is sufficient for the anchor to appear as 
<a href="#bottom" data-scroll-link>Scroll to bottom</a>
But will that work everywhere? and is it even valid HTML5 (I believe it is due to the autofocus, autoplay etc attributes). or do we need:
<a href="#bottom" data-scroll-link="true">Scroll to bottom</a>

解决方案
No. But...

As is common with all attributes, in the application/xhtml+xml serialisation, XML rules apply and the attribute must have an explicit name and (quoted) value.

So this question is really about the text/html serialisation, and therefore the relevant part of the HTML5 spec is Section 8 The HTML syntax

In particular, under attributes, it says:

  
Attributes can be specified in four different ways:
where the first of these is:

  
Empty attribute syntax
  
  
   Just the attribute name. The value is implicitly the empty string.
It's necessary to understand though that the value is of string type, not of boolean type.

For example, with <input id="cb" type="checkbox" checked>, the "checked" attribute is reflected by a property that is either true or false. So
if (document.getElementById("cb").checked)
will evaluate to true for the above markup.

In contrast, with <input id="cb" type="checkbox" data-checked>, the "data-checked" attribute is reflected via the dataset object as a string. The value of this property is the empty string, which in JavaScript is falsey. So,
if (document.getElementById("cb").dataset.checked)
will evaluate to false for the above markup.

To do the equivalent test, compare the value for "not undefined". I.e.
if (document.getElementById("cb").dataset.checked !== undefined)
will evaluate to true for the above markup.

See http://jsfiddle.net/GAxvW/

                        
这篇关于do html5数据属性需要一个值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！