1、先声明一个div和两个class样式，用来测试：

一、使用JQuery操作元素属性：

下面是获取或设置元素的DOM属性的方法，我只挑出一些和操作class属性相关的写一些小demo，其余的自己直接看教程就行了：https://www.w3school.com.cn/jquery/jquery_ref_attributes.asp

1、首先使用attr()和prop()方法修改元素的class属性：

1）单独使用attr()：

效果： 2）单独使用prop()：

效果： 3）同时使用attr()和prop()：

效果： 说明：通过上面的效果可以看出，通过attr()和prop()方法都可以为元素添加class属性，但是attr()和prop()是为元素添加新的class属性的同时，将原来的class属性全部清空（也就是覆盖之前的属性）。

2、addClass()：

效果： 说明：addclass()可以为元素添加class属性，并且元素本身的class属性不会受到影响。

3、hasClass()：

效果： 说明：判断某元素是否有某个class。

4、removeClass()：

效果： 说明：将元素的某个class属性移除。

5、toggleClass()：

这个我就不测试了，就是如果元素中有这个class属性，那么就将class删除，如果没有该class属性，则将这个class添加。

二、使用JavaScript对元素的class属性进行操作：

1、添加class属性值：

说明：上面这种方式和直接使用attr()和prop()一样，虽然会为元素添加一个class属性，但是会将之前所有的class属性覆盖掉。

效果： 2、添加class属性值：

说明：如果不想将之前的class属性值覆盖掉，那么将上面的代码进行简单的修改即可。（注意：+= 后面需要留一个空格）

效果： 3、添加class属性值：

说明：这种方法也是比较好用的，直接为元素添加一个class属性值，之前的不会覆盖。（注意：这里属性值后面没有空格）

效果： 4、删除class属性值：

说明：将某元素的很多class属性值中将其中一个属性值删除。

效果： 三、使用getAttribute()和setAttribute()方法来操作class属性：

1、可以使用getAttribute()来获取某元素的class属性。

效果：正常打印输出back 2、添加class属性：

说明：首先使用getAttribute()方法获取到class属性值（这里要保证之前就有一个class属性，如果没有的话获取到的值会是null，使用null调用concat方法会出现错误），然后使用concat()方法进行拼接，然后再使用setAttribute()方法，将拼接好的属性值赋值到元素class属性上。

效果： 3、替换class属性：

在之前的css的基础上再添加一个css：（修改字体颜色为黄色）

说明：我们首先为元素添加两个css属性，一个红色的背景一个黄色的字体，然后使用getAttribute()获取到该元素的class属性值，再使用replace将其中某一个属性进行替换（我们这里将yellow替换为col），最后将替换之后的class属性值使用setAttribute()赋值给元素。

下面是控制台打印的文字： 效果：（已经将黄色字体替换掉了） 4、删除class属性值：

说明：删除和替换实现原理相同，只不过是将要替换的属性值设置为空字符串""即可实现删除。

控制台打印： 效果：将黄色字体效果删除了 你要去做一个大人，不要回头，不要难过。

“其实生活在井里也挺好的，就是偶尔，会觉得世界很空，生活很咸。”