1. 程式人生 > >DOM自定義屬性 getAttribute、setAttribute、removeAttribute

DOM自定義屬性 getAttribute、setAttribute、removeAttribute

elementNode.attributes:屬性返回包含被選節點屬性的 NamedNodeMap。

elementNode.getAttribute(name):方法通過名稱獲取屬性的值。

elementNode.setAttribute(name, value):方法建立或改變某個新屬性。

elementNode.removeAttribute(name):方法通過名稱刪除屬性的值。
 


<input type="text" class="inp" id="inp" value="123" abc="abc" style="font-size:111px"/>
<script>
    //獲取物件
    var txt = document.getElementById("inp");
    // console.log(txt.abc);//JS通過.的方式不能獲取自定義的屬性
    // 1、 但是可以通過getAttribute可以獲取到
    console.log(txt.getAttribute("abc"));
    console.log(txt.getAttribute("id"));
    console.log(txt.getAttribute("class"));
    console.log(txt.getAttribute("value"));
    // 控制檯輸出:abc   inp   inp  123
 
    // 2、setAttribute設定自定義屬性,可以在瀏覽器中通過開發人員工具可以檢視屬性以及設定到input標籤上
    txt.setAttribute("userName","inp");
    // 3、修改屬性
    this.setAttribute("style","font-size:10px");
    // 4、removeAttribute移除自定義屬性,同樣在開發人員工具可以檢視屬性abc已經被移除掉了
    txt.removeAttribute("abc");
</script>
txt.attributes["myAttr"].value;   //通過attributes屬性
txt.getAttribute("myAttr");       //使用getAttribute方法