使用className修改样式属性

最新推荐文章于 2023-07-18 19:58:21 发布

Mir ㅤ

最新推荐文章于 2023-07-18 19:58:21 发布

阅读量563

点赞数

文章标签： html5 css html javascript vscode

本文链接：https://blog.csdn.net/weixin_45995139/article/details/120353483

版权

注意：
   1. 如果样式修改较多，可以采取操作类名方式更改元素样式；
   2. class 因为是保留字，因此使用className来操作元素类名属性；
   3. className 会直接更改元素的类名，会覆盖原先的类名；
   4. 保留原来的类的话使用多类名选择器 this.className('类名1 类名2');

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }

        .change {
            background-color: #357;
            color: springgreen;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div>
        盒子
    </div>
    <script>
        var test = document.querySelector('div');
        test.onclick = function () {
            this.style.backgroundColor = 'green';

            this.className = 'change';
        }
    </script>
</body>

</html>

Mir ㅤ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用className修改样式属性

注意： 1. 如果样式修改较多，可以采取操作类名方式更改元素样式； 2. class 因为是保留字，因此使用className来操作元素类名属性； 3. className 会直接更改元素的类名，会覆盖原先的类名； 4. 保留原来的类的话使用多类名选择器 this.className('类名1 类名2');<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫