<div style=”width:300px; height:200px; background-color:pink;”></div>
1、获取css样式
元素节点.style.css样式名称;
divnode.style.width; //获取宽度样式
2、设置css样式(有则修改、没有则添加)
元素节点.style.css样式名称 = 值;
divnode.style.width =‘500px’;设置div宽度样式
注意:
1、dom操作css样式只能操作“行内样式”(css样式分为 行内、内部、外部)
2、操作属性样式例如background-color/border-left-color,
需要变为backgroundColor、borderLeftColor,中恒线去掉,后边首字母大写。
className是class的一个别名,不可以直接访问class属性,可以用className访问
<body>
<h2>操作css样式</h2>
<div style="width: 300px; height: 200px; background: blue;">利用DOM操作css</div>
<input type="button" value="获取css" οnclick="f1()" /> <br/>
<input type="button" value="设置css" οnclick="f2()" /> <br/>
</body>
</html>
<script type="text/javascript">
var dv = document.getElementsByTagName('div')[0];
function f1() {
//获取
console.log(dv.style.width);
console.log(dv.style.height);
console.log(dv.style.backgroundColor);
}
function f2() {
//设置(有就更新,没有就创建
dv.style.color = "red";
dv.style.backgroundColor = "lightgreen";
dv.style.width = "600px";
}
</script>
效果图: