原生js获取、设置、删除属性

一时失言乱红尘 2021-12-14 06:45 445阅读 0赞

## 原生js获取、设置、删除属性 ##

**1、获取属性**

element.getAttribute(‘属性名’)； //返回指定元素属性名的属性值  
element.getAttributeNode(‘属性名’)； //返回指定元素的属性名和属性值  
element.attributes\[‘属性名’\]；//返回指定元素的属性名和属性值  
如下例：

<div id="box" class="classa">
        这是一个段落
    </div>
    <script>
        var box=document.getElementById("box");
        var attr=box.getAttribute('class');
        console.log(attr);  //classa
    
        var attr2=box.getAttributeNode('id');
        console.log(attr2);  //id="box";
    
        var attr3=box.attributes['id'];
        console.log(attr3);  //id="box";
    </script>

**2、设置属性**

element.setAttribute(name,value); //添加指定的属性，并为其赋指定的值。IE8及以下不支持  
element.setAttributeNode(attrNode); //向元素中添加指定的属性节点,如果这个指定的属性已存在，则此方法会替换它。  
如下例：

<div id="box" class="classa">这是一个段落</div>
    <script>
        var box=document.getElementById("box");
        //设置属性
        box.setAttribute('class','classb');   
        console.log(box); //<div id="box" class="classb">这是一个段落</div>
    
        //先创建属性节点，再设置属性值，最后设置属性
        var attr=document.createAttribute('name');
        attr.nodeValue="p1";
        box.setAttributeNode(attr);
        console.log(box);  //<div id="box" class="classb" name="p1">这是一个段落</div>
    </script>

**3、删除属性**  
element.removeAttribute(‘属性名’); //删除指定的属性,此方法不返回值  
element.removeAttributeNode(attrNode); //删除指定的属性，并以 Attr Node 对象返回被删除的属性。

<div id="box" class="classa">这是一个段落</div>
    <script>
        var box=document.getElementById("box");
        //移除属性
        var attr=box.removeAttribute('class'); 
        console.log(box);  //<div id="box">这是一个段落</div>
        console.log(attr);  //undefined
    
        //先获取属性，在删除指定属性
        var attr2=box.getAttributeNode('id');
        var attr3=box.removeAttributeNode(attr2);
        console.log(box);    //<div>这是一个段落</div>
        console.log(attr2);  //id="box"
        console.log(attr3);  //id="box"
    </script>