1、獲取屬性的值的方法
（1）element.屬性
<body>
<input id="input1" value="未失去焦點"></input>
<script>
input1.onblur=function(){
document.getElementById("input1").value="失去焦點";
}
</script>
</body>
該種方式只能夠獲取到標簽已經存在的屬性
（2） getElementById
獲取標簽存在的屬性的值：
<input id="input1" value="未失去焦點"></input> <script> input1.onblur=function(){ console.log(document.getElementById("input1").getAttribute("value")); } </script>
獲取自定義屬性：
<body>
<input id="input1" value="未失去焦點" index="123"></input>
<script>
input1.onblur=function(){
console.log(document.getElementById("input1").getAttribute("index"));
}
</script>
</body>
getElementById不僅能夠獲取到元素自身的屬性還能夠獲取自定義的屬性
（3）H5新增的獲取自定義屬性的方法（ie10以上）
<body>
<input id="input1" value="未失去焦點" data-index = "123" data-time="2020年7月25日08:27:20"></input>
<script>
input1.onblur=function(){
console.log(document.getElementById("input1").dataset);
console.log(document.getElementById("input1").dataset.index);
}
</script>
</body>
dataset是一個集合里面存儲的是所有以data開頭的自定義屬性
<input id="input1" value="未失去焦點" data-index = "123" data-time-now="2020年7月25日08:27:20"></input> <script> input1.onblur=function(){ console.log(document.getElementById("input1").dataset.timeNow); } </script>
屬性名有多個-相連接的時候，獲取值的時候要使用駝峰命名法
2、設置屬性值
（1）設置內置屬性
<body>
<input id="input1" value="未失去焦點" index="123"></input>
<script>
input1.onblur=function(){
document.getElementById("input1").value="早上好";
}
</script>
</body>
失去焦點時觸發函數，屬性的值發生變化：
（2）設置自定義屬性的值
<body>
<input id="input1" value="未失去焦點" index="123"></input>
<script>
input1.onblur=function(){
document.getElementById("input1").setAttribute("index","早上好");
console.log(document.getElementById("input1").getAttribute("index"));
}
</script>
</body>
3、移除自定義屬性
<body>
<input id="input1" value="未失去焦點" index="123"></input>
<script>
input1.onblur=function(){
document.getElementById("input1").removeAttribute("index");
}
</script>
</body>
總結：
為了區分自定義屬性和本身的屬性，如在書寫自定義屬性index的時候可以寫作：data-index