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>点我添加CSS</button>
<button>点我删除CSS</button>
<button>点我切换CSS</button>
<!-- 切换的意思就是没有则加，有则删除。 -->
<button>点我判断是否存在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>
运行结果：
三、总结：
这四种是原生的javascript样式操作中，还有其它样式操作方法，往后会提到，大家可以参考jquery的样式操作
---------------------
作者：my128
来源：CSDN
原文：blog.csdn.net/MY128/artic…
版权声明：本文为博主原创文章，转载请附上博文链接！
|
|
