浏览器如何处理HTML元素上的无效/未指定属性？

Question

对于考试,如果我有这个:

<div id="blah" myattribute="something">whatever</div>

我可以安全,没有浏览器会忽略(从而使旧版JavaScript无法访问)myattribute吗？我知道这很丑陋而且不标准,但非常有用.或者,如果他们这样做,jQuery仍然能够得到它们吗？

Answer 1

你应该使用data属性,它们是web标准.

像这样:

<div id="blah" data-myattribute="something">whatever</div>

然后在jQuery中你可以做到:

var value = $("#blah").data("myattribute");

Answer 2

浏览器不会抱怨无法识别的属性，Javascript 和 jQuery 仍然能够访问它们：

console.log( $('#blah').attr('myattribute') ); // something
console.log( document.getElementById('blah').getAttribute('myattribute') ); // something

data-*但是，您应该使用专门用于自定义属性的HTML5属性。jQuery 有data()访问/设置它们的方法：

<div id="blah" data-myattribute="something">whatever</div>

<script>
console.log( $('#blah').data('myattribute') ); // something
</script>