Javascript在样式的相关操作[0601]

最新推荐文章于 2024-03-23 23:29:13 发布

MY128

最新推荐文章于 2024-03-23 23:29:13 发布

阅读量350

点赞数

分类专栏： javascript 文章标签： javascript 样式操作 classList

本文链接：https://blog.csdn.net/MY128/article/details/85256941

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Javascript在样式的相关操作[0601]

一、开解：

classList下的方法，node指的是节点，括号内填的是样式名。
1、 node.classList.add()//添加css
2、 node.classList.remove()//删除css
3、 node.classist.toggle()//切换css
4、 node.classist.contains()//判断是否包含css

二、实例：

<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>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.acss{
color: red;
}
</style>
</head>
<body>
<div id="sfhz">三色方块盒子</div>
<button οnclick="caddcss()">点我添加CSS</button>
<button οnclick="cdelcss()">点我删除CSS</button>
<button οnclick="ctogcss()">点我切换CSS</button>

<button οnclick="cctcss()">点我判断是否存在CSS</button>
</body>
<script>
var mhz = document.querySelector("#sfhz");
//以下用的是箭头函数，不了解的可以看我写的文[0403]
var caddcss=()=>{mhz.classList.add('acss')};
var cdelcss=()=>{mhz.classList.remove('acss')};
var ctogcss=()=>{mhz.classList.toggle('acss')};
var cctcss=()=>{
if (mhz.classList.contains('acss')) {
alert("好吧，存在acss这个样式");
}
};
</script>