通过className来改变样式

柔光的暖阳◎ 2023-02-17 08:56 33阅读 0赞

![在这里插入图片描述][20200613114041566.gif]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <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>
    </body>
    
    </html>

[20200613114041566.gif]: https://img-blog.csdnimg.cn/20200613114041566.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 React通过classnames库添加类

React添加Class的方式在vue中添加class是一件非常简单的事情: 你可以通过传入一个对象, 通过布尔值决定是否添加类: <button :cla

╰+哭是因爲堅強的太久メ/ 2023年10月02日 20:57/ 0 赞/ 4 阅读

相关通过className来改变样式

![在这里插入图片描述][20200613114041566.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

柔光的暖阳◎/ 2023年02月17日 08:56/ 0 赞/ 34 阅读

相关 className多种样式的三种写法

1、 className 利用 `${ }` className={ `${ style.fruit} ${ style.apple}`} 2、 cla

青旅半醒/ 2023年02月10日 05:10/ 0 赞/ 177 阅读

相关如何使用JS来改变CSS样式

方法: document.getElementById("xx").style.xxx中的所有属性是什么 <table style="margin:0px; pad

电玩女神/ 2022年09月24日 12:18/ 0 赞/ 204 阅读

相关 React 项目----className 样式（13）

在上一篇的博客中，我们介绍了react中的style 内联的样式 [https://blog.csdn.net/datouniao1/article/details/1195

末蓝、/ 2022年09月04日 03:51/ 0 赞/ 195 阅读

相关使用js改变DOM样式的三种方式 - className属性

改变dom节点样式另一种方式是设置dom的className属性. <style type="text/css"> .red{ color:red; }

向右看齐/ 2022年08月07日 11:35/ 0 赞/ 233 阅读

相关使用CSS过滤效果来改变图片样式

1. </pre><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-botto

淩亂°似流年/ 2022年08月07日 04:58/ 0 赞/ 305 阅读

相关 vue 通过动态绑定class，改变样式

根据输入框或者下拉选择框有没有值，改变按钮可不可用，及按钮颜色 <el-select v-model="selectData.id" placeholder="请选择

￡神魔★判官ぃ/ 2022年05月13日 15:20/ 0 赞/ 259 阅读

相关通过JQuery来修改CSS样式

JQuery是基于JS（JavaScript）代码编写的一种框架，其封装到许多内置属性和方法，让用户使用起来更加便利，具体代码如下： ①JQuery代码部分：

浅浅的花香味﹌/ 2021年09月23日 13:04/ 0 赞/ 361 阅读

相关 React使用className引入多个类样式

在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。比如说有一个固定样式"title": <div className="

Love The Way You Lie/ 2021年09月17日 11:58/ 0 赞/ 356 阅读