js添加css样式的另一种方式-创建样式规则【2021.12.10】

本文链接：https://blog.csdn.net/masierty/article/details/121956585

1.利用document.createElement("style")创建style标签

2.利用innerHtml加入样式

3.利用document.head.appendChild(style)将style元素放入head标签里面

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .contenter>*{
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            font-size: 22px;
        }
        .contenter div:nth-child(1){
            background-color: rgb(238, 96, 96);
        }
        .contenter div:nth-child(2){
            background-color: rgb(121, 247, 109);
        }
    </style>
</head>
<body>
    <div class="contenter">
    <div>1</div>
    <div>2</div>
    </div>
</body>
<script>
    const divs = document.querySelectorAll(".contenter div");
    let contentStyle = document.createElement("style");
    // 创建的的元素并不属于document对象，只是创建出来，并未添加到HTML文档中。添加的方式有appendChild或者insertBefore方法。
        contentStyle.innerHTML=`.contenter{
            width:180px;
            heifht:180px;
            background:black;
            }`
            console.log(contentStyle)//style
            console.log(contentStyle.nodeType)//1,为元素节点
            // 可以看出元素节点包含了属性节点
    for(let i =0;i<divs.length;i++){
        const contenter = document.querySelector(".contenter");
       divs[i].addEventListener("click",()=>{
           if(i==0){
               document.head.appendChild(contentStyle)
           }else{
               document.head.removeChild(contentStyle)
           }
       })
            
    }
</script>
</html>

最后简单说一下什么是元素节点：

每个HTML标签都是一个元素节点

而文本节点就是包含在元素节点中的文本，空白也算哦

属性节点是每一个HTML属性

注释属于注释节点

整个文档是一个文档节点

元素节点和文本节点属于父子级关系