DOM——样式属性操作

北冥有大鹏

已于 2022-07-20 20:36:32 修改

阅读量201

点赞数

分类专栏： DOM学习文章标签： css css3 javascript

于 2022-07-20 20:17:57 首次发布

本文链接：https://blog.csdn.net/weixin_45328723/article/details/125899690

版权

DOM学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

样式属性操作

element.style 行内样式操作(样式比较少推荐)
element.className 类名样式操作(样式比较多时推荐)
js里面样式采取驼峰命名法比如 fontSize,backgroundColor ;
js修改style样式操作，产生的是行内样式，css权重比较高;

1.行内样式操作

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>

    </div>
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        //2.注册事件，处理程序
        div.onclick = function () {
            //div.style  里面的属性采取驼峰命名法
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }

    </script>

效果：
请添加图片描述
2.类名样式操作

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

        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>


</head>

<body>
    <div class="first">文本</div>
    <script>
        //1.使用element.style 获得修改元素样式 如果样式比较少功能比较简单下使用
        var test = document.querySelector('div');
        test.onclick = function () {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            //让我们当前元素类名改为 change

            //2.我们可以修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            //3.如果想要保留原来的类名可以这样做
            
            //this.className = 'change';
            this.className = 'first change'
        }
    </script>