JavaScript中dom对css样式操作

时间：2022-07-10 11:23:10

<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" onclick="f1()" /> <br/>
    <input type="button" value="设置css" onclick="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>
效果图：

JavaScript中dom对css样式操作


标签：

相关文章