HTML 标签自定义属性的问题-原创手记-慕课网

HTML 标签里可以自定义属性，但要考虑到浏览器兼容性的问题。

写一段 HTML 代码如下：
[html] view plain copy

<div id='test' myAttr='testAttr'><div>

在这个 <div> 标签里，我们自定义了一个属性 “myAttr” ，它的属性值为 “testAttr” 。如果定义一个属性却不使用它，那么这个属性是没有任何意义的。接下来我们在 JavaScript 里来调用这个属性：
[javascript] view plain copy

var test = document.getElementById(test);  
<pre name="code" class="html">alert(test.getAttribute('myAttr'));  
test.setAttribute('myAttr', 'newAttr')<pre name="code" class="javascript"><pre name="code" class="html">alert(test.getAttribute('myAttr'));

经过测试，以上这段代码在所有浏览器里都有效。运行后会依次弹出 “testAttr” 和 "newAttr" 。

在 IE 5-8 里，以下代码也可以使用：

[javascript] view plain copy

var test = document.getElementById(test);  
<pre name="code" class="html">alert(test.myAttr);  
test.myAttr = 'newAttr';  
alert(test.myAttr);

以上代码运行后会依次弹出 "testAttr" 和 "newAttr" 。

当然，使用 jQuery 也可以做到全部兼容：

[javascript] view plain copy

alert(  
$("#test").attr("myAttr")  
);  
<pre name="code" class="html">$("#test").attr("myAttr", "newAttr");  
alert(<pre name="code" class="javascript"><pre name="code" class="html">$("#test").attr("myAttr")

);

自定义属性一般是我们用来存储数据或是相关依据的。根据实际情况，自定义属性其实是很有用的。