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属性
注释属于注释节点
整个文档是一个文档节点
元素节点和文本节点属于父子级关系
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
