html5 data-yourvalue,HTML5数据属性与值？(HTML5 data attribute vs value?)

HTML5数据属性与值？(HTML5 data attribute vs value?)

除语义和浏览器支持外，原始值属性和HTML5数据属性之间是否有任何区别？

Besides semantics and browser support, is there any difference between the original value attribute, and the HTML5 data attribute?

原文：https://stackoverflow.com/questions/17375291

更新时间：2021-01-20 07:01

最满意答案

好吧， value不是div元素的标准属性，因此你的html无效。 如果您想要遵守html5规范，则必须使用data-属性。

简而言之： data-属性在html5中有效，而您的value方法在所有html版本上无效。

Well, value is not a standard attribute for a div element so your html is not valid. If you want to honor html5 specification, you'll have to use data- attributes.

So in short: data- attributes is valid in html5 while your value approach is invalid on all html versions.

相关问答

确实有这样的功能预览，看http://www.w3.org/TR/css3-values/#attr-notation 这个小提琴应该像你需要的那样工作，但现在不会。 不幸的是，它仍然是一个草案，并没有在主要浏览器上完全实现。 但它对于伪元素的内容是有效的。 There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation This fiddle should wor

...

您可以像使用属性选择器的任何其他属性一样选择data-属性。 在这种情况下，您需要属性等于选择器 ，如下所示： $("div[data-role='footer']")

它们由jQuery特别处理，例如允许.data()从正确的输入中获取它们，但是就DOM遍历而言，它们只是另一个属性，所以在编写选择器时会想到它们。 You can select on a data- attribute like any other attribute...using an attribute selector.

...

您可以通过使用hasAttribute方法检查元素是否包含属性来完成此操作： document.getElementById('1').hasAttribute('data-foo')

You can accomplish this by checking if the element contains the attribute using the hasAttribute method: document.getElementById('1').hasAttribute('data-foo'

...

我不是100％确定我理解你的问题，但我相信你只是想在移动设备上显示6张图片而不是12张。如果是这样的话，可以轻松地使用CSS完成此操作，而无需复制该部件： @media only screen and (max-width: 768px) {

.instawidget li:nth-child(n+7) {

display:none;

}

}

我建议你使用AJAX。 使用AJAX： 在打开PHP文件之前使用一些Javascript。 您可以使用类似variable = document.getElementById('IdOfYour

1. tag').getAttribute('data-something')来获取数据属性的内容。 然后使用xmlhttp.open('GET','YourPHPFile.php?dataAttr=' + variable ,false/true')打开PHP文件xmlhttp.open('GET','

...

测试元素是否具有属性dataset 。 Modernizr.addTest('data', function () {

var elem = document.createElement('div');

return !!elem.dataset;

});

Test whether an element has the property dataset. Modernizr.addTest('data', function () {

var elem = document

...

好吧， value不是div元素的标准属性，因此你的html无效。 如果您想要遵守html5规范，则必须使用data-属性。 简而言之： data-属性在html5中有效，而您的value方法在所有html版本上无效。 Well, value is not a standard attribute for a div element so your html is not valid. If you want to honor html5 specification, you'll have to

...