【使用className修改样式属性JavaScript】

最新推荐文章于 2024-04-09 21:00:07 发布

王猫粮

最新推荐文章于 2024-04-09 21:00:07 发布

阅读量208

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_70684059/article/details/131007466

版权

<style>
        .first{
            background-color: pink;
            width: 50px;
            height: 50px;
        }
        .change{
            background-color: blue;
            width: 100px;
            height: 100px;
        }
    </style>
<body>
    <div class="first">

    </div>
    <script>
        var test=document.querySelector("div")
        test.onclick=function(){
            // 第一种方法
            // this.style.backgroundColor="blue"
            // this.style.width="100px"
            // this.style.height="100px"

            // 第二种方法（多用）
            // 注意：会覆盖原先的类名
            this.className='change'
            // 注意：如果要保留以前的类名要这样写
            // this.className='first change'
        }
    </script>
</body>