js给指定class类的对象，添加或者移除class类，以及js动态修改其css样式

Sca_jie

已于 2024-06-29 11:52:15 修改

阅读量353

点赞数 2

分类专栏： css vue JavaScript 文章标签： javascript 前端 vue.js

于 2024-06-29 11:51:30 首次发布

本文链接：https://blog.csdn.net/weixin_42966151/article/details/140061584

版权

vue 同时被 3 个专栏收录

28 篇文章 2 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

代码及注释如下：

// 获取到class对象[test]的实例
this.test = document.querySelector('.test');

// 判断实例对象[test]的class集合中有无包含某个class类[test2]
if(this.test.classList.contains('test2')) {
    return true
} else {
    return false
}

// 添加或者移除class类
this.test.classList.add('test2'); // 为实例对象[test]添加新的class类[test2]
this.test.classList.remove('test2'); // 为实例对象[test]移除class类[test2]

// 动态修改实例对象[test]的样式
this.test.style.display = 'block'; // 显示组件
this.test.style.display = 'none'; // 隐藏组件