DOM对象操作CSS

最新推荐文章于 2023-08-02 16:28:21 发布

向51致敬

最新推荐文章于 2023-08-02 16:28:21 发布

阅读量320

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/pan_by/article/details/101924446

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

通过style对象改变节点的CSS
利用style对象来控制元素的css, 每个style对象对应为该元素指定的css, 而每个css属性—对应于style对象的属性。
对于单个单词的css属性，在style对象中的属性名称不变。
对于双单词或多单词的属性改写为骆驼写法。例如：css中的font-size对应style属性为fontSize.
使用className属性指定结点样式
结点的className属性对应于css中的类选择器。

<body>
    <!--
        DOM对象操作CSS
            对DOM的style属性设置
            样式名称和CSS中样式名称的区别
               去掉- 变为驼峰命名法就可以  值 "";
     -->
    <div id="mydiv" >

    </div>

    <input type="button" value="样式1" onclick="fun1()">
    <input type="button" value="样式2" onclick="fun2()">
    <input type="button" value="样式3" onclick="fun3()">

    <script type="text/javascript">
        var div = document.getElementById("mydiv");
        function fun1(){
            div.style.border="1px red solid";
            div.style.width="300px";
            div.style.height="300px";
        }

        function fun2(){
            div.style.backgroundColor="#0ff";
            div.style.width="400px";
            div.style.height="200px";
        }

        function fun3(){
            div.style.background="url(img/0.jpg) no-repeat 50% 50%";
            div.style.width="400px";
            div.style.height="200px";
        }

    </script>
</body>