Js中设置css样式

最新推荐文章于 2023-03-01 14:07:51 发布

destiny_code

最新推荐文章于 2023-03-01 14:07:51 发布

阅读量1.9k

点赞数

分类专栏： Css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45660500/article/details/109708664

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本次介绍了3种修改css样式的方法，下面分别介绍

css代码

<style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .style{
            background-color: red;
        }
    </style>

js代码

 <script>
        window.onload=function(){
            var obj=document.querySelector("div");
            var btn=document.querySelector("button");
            btn.addEventListener("click",function(){
                // 方法1
                obj.style.backgroundColor="red";
                // 方法2
                // obj.style.cssText="background-color:black;"
                // 方法3
                // obj.className="style";
            },false)
        }
    </script>

HTML代码

<body>
    <div></div>
    <button>按钮</button>
</body>

方法1.使用obj.style来修改css
obj.style.属性名=“属性值”;此方法设置的是内联样式，而且有"-"时需要使用驼峰命名法

obj.style.backgroundColor="red";

方法2.使用obj.style.cssTest来修改css
obj.style.cssText=“属性名：属性值;” 此方法设置的也是内联样式，但是不需要使用驼峰命名法。

obj.style.cssText="background-color:black;";

方法3. 使用obj.className来修改样式表的类名

obj.className=“类名”;此方法修改的是css样式表，会将相同的样式覆盖

obj.className="style";

destiny_code

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js中设置css样式

本次介绍了3种修改css样式的方法，下面分别介绍css代码<style> div{ width: 100px; height: 100px; background-color: pink; } .style{ background-color: red; } </style>js代码 <script&g
复制链接

扫一扫