原生JS实现增加删除class（addClass,removeClass,toggleClass）

<!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>

</div>

<input type = "button" value = "变黑" onclick = "toggleClassTest();" />

</body>

</html>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。