使用js对class(类名)增删改查的好办法，不要只用会className和jQuery啦

那就叫菜鸟吧

已于 2022-01-24 15:49:16 修改

阅读量5.2k

点赞数 6

分类专栏：前端学习之旅文章标签： jquery javascript 前端

于 2022-01-24 15:48:25 首次发布

本文链接：https://blog.csdn.net/m0_47974640/article/details/122668915

版权

前端学习之旅专栏收录该内容

18 篇文章 0 订阅

订阅专栏

js修改样式的方法

1、对象.className(‘类名’)

2、setAttribute(),getAttribute()和removeAttribute()

3、JQuery的addClass()、removeClass()

使用js来对类名进行增删改查以便到达我们需要的功能，这是一个很实用的操作。

但当我们需要设置多个类名时，原生的可能比较多人熟知的className()就不能用了，因为它会覆盖，不能在原有的类名上增加，很鸡肋！
原生js的setAttribute(),getAttribute()和removeAttribute()：是对class属性的设置，不能增加class的属性值，只能覆盖，或者把class的属性写成‘classA classB classC ’的字符串

之前学习JQuery的时候，觉得它对类名的修改很直接好用，如addClass().removeClass()，但如今JQuery库被广泛抛弃！

为了更好地实用地操作样式，下面整理2种实用性强的不易淘汰的办法：

4.原生js的classList

对象.classList.add(‘类名’)
对象.classList.remove(‘类名’)
对象.classList.toggle(‘类名’) ; toggle，有这个类名就删除，没有就添加，相当于开关；跟display：none（元素的隐藏和显示）、布尔值的切换，相对的两个属性结合，可以实现很多开关、切换样式等功能，很实用

对象.classList.replace(‘旧类名，新类名’)
对象.classList.contains(‘类名’)，返回布尔值，查看是否拥有这个类名

   <style>
         .bgRed {
             background-color: red;
         }
 
         .bgYellow {
             background-color: yellow;
         }
 
         .bgGreen {
             background-color: green;
         }
 
         .bigFont {
             font-size: 30px;
         }
 
         .pinkFont {
             color: pink;
         }
 
         div {
             width: 300px;
             height: 300px;
             border: 2px solid black;
         }
     </style>
 </head>
 
 <body>
 
     <div>
         测试文字
     </div>
     <button>切换背景颜色</button>
     <script>
         window.onload = function () {
             let box = document.querySelector('div')
             box.classList.add('bigFont')
             box.classList.add('bgGreen')
             box.classList.add('pinkFont')
             console.log(box.classList);
             console.log(box.className);
             if (box.classList.contains('pinkFont')) {
                 box.classList.remove('bigFont');
             }
             let btn = document.querySelector('button')
             btn.addEventListener('click', function () {
                 box.classList.toggle('bgGreen')
             })
         }
     </script>
 </body>

参考MDN：Element.classList - Web API 接口参考 | MDN

MDN的代码如下：

 const div = document.createElement('div');
 div.className = 'foo';
 
 // 初始状态：<div class="foo"></div>
 console.log(div.outerHTML);
 
 // 使用 classList API 移除、添加类值
 div.classList.remove("foo");
 div.classList.add("anotherclass");
 
 // <div class="anotherclass"></div>
 console.log(div.outerHTML);
 
 // 如果 visible 类值已存在，则移除它，否则添加它
 div.classList.toggle("visible");
 
 // add/remove visible, depending on test conditional, i less than 10
 div.classList.toggle("visible", i < 10 );
 
 console.log(div.classList.contains("foo"));
 
 // 添加或移除多个类值
 div.classList.add("foo", "bar", "baz");
 div.classList.remove("foo", "bar", "baz");
 
 // 使用展开语法添加或移除多个类值
 const cls = ["foo", "bar"];
 div.classList.add(...cls);
 div.classList.remove(...cls);
 
 // 将类值 "foo" 替换成 "bar"
 div.classList.replace("foo", "bar");

5.在vue中对样式增删改查

使用对象+布尔值

v-bind: 绑定计算属性，这个计算属性返回class和class的布尔值(是否启用这个class)；
使用计算属性，可以实现不用在html的标签再修改类名
新的class在style中添加，在vue实例的data中修改class的布尔值，就可以作用在对应的html标签上

   <div id="div1" class="region" :class="getClass()">
         {{text}}
         <button @click="changeColor">changeColor</button>
         <button @click="changeShape">changeShape</button>
     </div>

     <script>
         let div1 = new Vue({
             el: '#div1',
             data: {
                 text: '文字',
                 isShape: false,
                 isBluebg: false,
             },
             methods: {
                 changeColor: function () {
                     this.isBluebg = !this.isBluebg;
 
                 },
                 changeShape: function () {
                     this.isShape = !this.isShape;
                
                 },
                 getClass: function () {
                     return { shape: this.isShape, bluebg: this.isBluebg }
                 }
             }
         })
 
     </script>

  <style>
         .region {
             width: 100px;
             height: 100px;
             border-radius: 50%;
             background-color: red;
         }
 
         .shape {
             border-radius: 0;
         }
 
         .bluebg {
             color: antiquewhite;
             background-color: blue;
         }
     </style>

关键点总结：

用js对样式增删改查：

原生就用classList
vue就用对象+布尔值+计算属性

那就叫菜鸟吧

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
使用js对class(类名)增删改查的好办法，不要只用会className和jQuery啦

js修改样式的方法1、对象.className(‘类名’)2、setAttribute(),getAttribute()和removeAttribute()3、JQuery的addClass()、removeClass() 使用js来对类名进行增删改查以便到达我们需要的功能，这是一个很实用的操作。但当我们需要设置多个类名时，原生的可能比较多人熟知的className()就不能用了，因为它会覆盖，不能在原有的类名上增加，很鸡肋！原生js的setAttribute()
复制链接

扫一扫

专栏目录