用javascript更改css样式的三种方式

吃掉月亮

于 2018-08-08 21:22:56 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

分类专栏： Html及Javascript 文章标签： Javascript

本文链接：https://blog.youkuaiyun.com/qq_41135704/article/details/81515795

Html及Javascript 专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .bb{
                width: 300px;
                height: 300px;
                background: cadetblue;
            }
        </style>
    </head>
    <body>
        <div id="aa"></div>
        <script>
            //第一种：获取相应标签对应的script对象.style
            (
                function(){
                    var a = document.getElementById("aa");
                    a.style.width = "200px";
                    a.style.height = "200px";
                    a.style.backgroundColor = "chartreuse";
                }
            )();

            //第二种：获取相应标签对应的script对象.className
            var a = document.getElementsByTagName("div")[0];
            a.className = "bb";


            //第三种：获取相应标签对应的script对象.setAtribute("属性名","属性值")
            var a = document.getElementsByTagName("div")[0];
            a.setAttribute("class","bb");
            a.removeAttribute("class");
        </script>
    </body>
</html>