原生js动态创建、获取、删除属性的几种方式

1.创建属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态创建属性</title>
<style>
.democlass{color:blue;}
</style>
</head>
<body>
    
<ul class="container">
　　<li class="child">Coffee</li>
　　<li class="child">Tea</li>
　　<li class="child">Coffee</li>
　　<li class="child">Tea</li>
</ul>
    
<script>
/*第一种方法(此方法仅限于css样式)
    var child = document.getElementsByTagName("li")[0];
    child.style.color="red";
*/

/*第二种方法
　　document.getElementsByTagName("li")[0].setAttribute("class","democlass"); 
*/
//第三种方法
    var newStyle=document.getElementsByTagName("li")[1];
    var newAttr = document.createAttribute("class");
    newAttr.nodeValue="democlass";　　//使用value或nodeValue均可
    newStyle.setAttributeNode(newAttr);
</script>
</body>
</html>

getdd[i].className="selected";   //通过数组设置标签直接添加类名

 2.获取属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态获取属性</title>
<style>
.democlass{
    color:blue;
}
</style>
</head>
<body>
<p id="demo"></p>    
<ul class="example">
    <li class="child1">Coffee</li>
    <li class="child2">Tea</li>
    <li class="child3">Coffee</li>
    <li class="child4">Tea</li>
</ul>
    
<script>
　　　/*第一种方式：返回指定属性名的属性值
      var getAttr=document.getElementsByTagName("li")[0].getAttribute("class");   
　　    document.getElementById("demo").innerHTML=getAttr;
     */
    //第二种方式:返回指定属性名的属性值，以Attr对象
　    var getAttr=document.getElementsByTagName("li")[0].getAttributeNode("class").value;   
　    document.getElementById("demo").innerHTML=getAttr; 
    //二种结果都返回child1
</script>
</body>
</html>

3.删除属性(文字颜色)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态删除属性</title>
<style>
.democlass{
    color:blue;
}
</style>
</head>
<body>
<p id="demo"></p>    
<ul class="example">
    <li class="child1">Coffee</li>
    <li class="child2 democlass">Tea</li>
</ul>
    
<script>
    /*第一种方式：删除指定的文字颜色属性
    document.getElementsByTagName("li")[1].removeAttribute("class"); 
 
    */
    //第二种方式：删除指定的文字颜色属性，并以 Attr Node 对象返回被删除的属性
    var n=document.getElementsByTagName("li")[1];
    var a=n.getAttributeNode("class");
    n.removeAttributeNode(a);
   
　　 /*
    此方法与 removeAttributeNode() 方法的差异是：removeAttributeNode() 方法删除指定的 Attr 对象，而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值，而 removeAttributeNode() 方法返回被删除的属性，以 Attr 对象的形式。
    */
</script>
</body>
</html>

 如果仅仅只是添加类:document.getElementById("myDIV").classList.add("mystyle")

posted @ 2019-05-04 20:02  给时光以生命  阅读(2031)  评论(0)  编辑  收藏  举报