样式的修改有三种方式:
<style>
.box1{
background-color: green;
height: 200px;
width: 200px;
color: hotpink;
font-size: 20px;
}
</style>
<div id="div1">
hello div
</div>
<button onclick="onchangeStyle()"> 节点样式的修改 </button>
<script>
function onchangeStyle(){
// 拿到节点
var divNode = document.getElementById("div1");
</script>
方法一:
// 修改className 属性 对应节点的class 的类选择器
divNode.className = "box1";
方法二:
// 通过attribute 修改class属性值 也可以
divNode.setAttribute("class","box1");
方法三:
上面的2种方式 修改 节点的样式思路是修改 class 属性 ,第三种 通过 节点的style属性 修改样式 style会对应每个css 有属性 ,多个css 属性单词用 驼峰命名法 , 这里写法是div标签行间 引入style 样式
divNode.style.backgroundColor = "skyblue";
divNode.style.color = "red";
divNode.style.fontSize = "20px";
style 属性的修改 和 className 有区别吗?
1 style 的修改是在元素的行间添加style属性
2. style的修改需要改很多css 的样式 (稍微复杂)
3.className 修改class 的属性
4. className修改 比 style的简单