JavaScript中dom对css样式操作

最新推荐文章于 2023-09-05 14:28:51 发布

dancheng_work

最新推荐文章于 2023-09-05 14:28:51 发布

阅读量581

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/dancheng1/article/details/77018336

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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>

效果图：

dancheng_work

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中dom对css样式操作

1、获取css样式元素节点.style.css样式名称;divnode.style.width; //获取宽度样式2、设置css样式(有则修改、没有则添加)元素节点.style.css样式名称 = 值;divnode.style.width =‘500px’;设置div宽度样式注意：1、dom操作css样式只能操作“行内样式”(css样式分为行内、内部、外部)
复制链接

扫一扫

专栏目录