当前位置:清晨 » 站长笔记 » javascript笔记 » 原生JS实现增加删除class(addClass,removeClass,toggleClass)

原生JS实现增加删除class(addClass,removeClass,toggleClass)

发布日期:2019年12月18日 02:12:28 点击量: 107

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

来源于网络.

 

 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.night-mode{
background:#383838;
color:#888888;
}
</style>

<script type="text/javascript"><br>//判断样式是否存在
function hasClass(ele, cls) {
return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
//为指定的dom元素添加样式
function addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
//删除指定dom元素的样式
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
ele.className = ele.className.replace(reg, " ");
}
}
//如果存在(不存在),就删除(添加)一个样式
function toggleClass(ele,cls){
if(hasClass(ele,cls)){
removeClass(ele, cls);
}else{
addClass(ele, cls);
}
}
//调用
function toggleClassTest(){
var ele = document. getElementsByTagName('body')[0];
toggleClass(ele,"night-mode");
}
</script>
</head>

<body>
<div style = "width:250px;height:100px;">
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
<p>这是一段文字 </p>
</div>
<input type = "button" value = "变黑" onclick = "toggleClassTest();" />
</body>
</html>

 

 


关键词:

本文网址:http://menglei.info/3637/,转载请以链接形式注明出处,谢谢合作!

老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725

上一篇:

下一篇: 没有了

发表评论

电子邮件地址不会被公开。 必填项已用*标注