原生js動態創建、獲取、刪除屬性的幾種方式

本文轉載自查看原文 2019-05-04 20:02 999 【003】JavaScipt

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")

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 原生js動態創建文本內容的幾種方式 js - DOM -06 獲取元素屬性的幾種方式 js獲取標簽的幾種方式 js 獲取元素的幾種方式原生JS設置、刪除、獲取Cookie js原生獲取元素的css屬性 Springboot獲取配置屬性的幾種方式 JS動態設置css的幾種方式原生js設置屬性值和獲取屬性值原生js實現動態刪除表格的一行