探究HTML标签自定义属性

HTML标签可以自定义属性，IE，Firefox 以及chrome下的兼容性问题

 <div l='s' id='myid' name='wac'>
123
    </div>
    <div id="newTest" myAttr="getAttr"></div>

自定义属性 l myAttr
IE浏览器

console.log(document.getElementById('myid').name)

直接赋值而动态产生一个自定义属性：

document.getElementById("newTest").newAttr = "new";

火狐，谷歌

console.log(document.getElementById("newTest").getAttribute('myAttr'))

直接赋值而动态产生一个自定义属性：

document.getElementById("newTest").setAttribute("newAttr","new");

另外补充一点，如果不想做兼容判断，其实我们可以使用Jquery的attr方法来获取与设置自定义属性的值，目前测试结果是全兼容。

$("#newTest").attr(“myAttr”);
$("#newTest").attr(“newAttr”,“new”);