JS element.className修改样式数据的方法（适合样式比较多的情况）

揭开画皮

于 2024-05-23 10:53:29 发布

阅读量102

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_75166176/article/details/139141740

版权

<body>
    <style>
        div{
            width:50px;
            height:50px;
            background-color: red;
        }
        .style1{
            background-color: #666;
            text-align :center;
            line-height: 3em;
            font-size: 20px;
            color: white;
        }
        .style2{
            width:100px;
            margin:0 auto;
            height:100px;
            background:#008c8c;
        }
    </style>

    <div class="style1">文本</div>
        <script>
            var test = document.querySelector('div');
            test.onclick = function(){
                // 使用element.style 只适合样式修改较少的情况 
                // this.style.backgroundColor = '#444';
                // this.style.textAlign = 'center';
                // this.style.lineHeight = '3em';
                // this.style.fontSize = '20px';
                // this.style.color = 'white';

                // 可以使用element.className 的方法先创建类样式设置到style中，再调用类名 
                // 如果要保留原类样式可以，输入多个类名
                this.className = 'style1 style2';
            }
        </script>
</body>