文章目录
一、获取
1.1 获取样式名——className
语法：对象名.className;
document.getElementById("container").getElementsByTagName("p").className;
1.2 获取样式属性值——style.property
注意：只能获取行内样式属性。
语法：对象名.style.样式属性;
<body>
<p id="p1" style="width: 200px"> style.property学习。</p>
<script type="text/javascript">
document.write(document.getElementById("p1").style.width);
</script>
</body>
二、替换样式
2.1 样式
2.1.1 className
语法：对象名.className = “样式名”;
document.getElementById("p1").className = "fc";
2.1.2 setAttribute
语法：对象名.setAttribute(“class”, “样式名”)
document.getElementById("p1").setAttribute("class", "fc");
2.1.3 classList
语法：对象名.classList = “样式名”;
document.getElementById("p1").classList = "fc";
2.2 属性样式
2.2.1 style.样式属性
语法：对象名.style.color = “red”;
<body>
<p id="p1" style="width: 200px"> style.property学习。</p>
<script type="text/javascript">
document.getElementById("p1").style.width = "20px";
</script>
</body>
2.2.2 setAttribute
语法：对象名.setAttribute(“style”, "属性1: 属性值1; 属性2: 属性值2; ")
document.getElementById("p1").setAttribute("style", "height: 100px; width: 200px");
2.2.3 style.setProperty
语法：对象名.style.setProperty(“属性”, “属性值”);
document.getElementById("div1").style.setProperty("height", "40px" );
2.2.4 style.cssText
语法：对象名.style.cssText = "属性: 属性值 ";
document.getElementById("div1").style.cssText = "height: 100px ";
三、增加样式
3.1 classList.add(“样式名”)
语法：对象名.classList.add(“样式名”)
document.getElementById("p1").classList.add("fc");
四、删除样式
4.1 classList.remove(“样式名”)
语法：对象名.classList.remove(“样式名”)
document.getElementById("p1").classList.remove("fc");