自定义属性

自定义属性是相对于内置属性来说的。

1、完全自定义属性

<input type="text" id="txtBox" displayName="123456" />

var obj = document.getElementById("txtBox");
// 读取
obj.getAttribute("displayName");
obj.attributes["displayName"].nodeValue;
// 设置
obj.setAttribute("displayName ","123456");
obj.attributes["displayName"].nodeValue = "123456";

2、

1：设置自定义属性

html5中设置自定义属性用“data-”开头，多个字母用 “-” 连接

 

<!-- Html5规定，给元素自定义数据属性时，属性名称以data-开头，但是真正的属性名不包括data--->
        
<p id="p1" data-school = "qh">清华大学</p>

2：获取定义的自定义属性

<script>
    var value1=document.getElementById("p1").dataset["school"];
    console.log("value1:"+value1);
</script>

 dataset 后边必须要用驼峰命名法 否则可能获取不到属性值

当然也可以用getAttribute 来获取自定义属性

<script>
    var value2=document.getElementById("p1").getAttribute("data-school");
    alert("value2:"+value2)
</script>