JS笔记 类操作（通过修改元素的class属性来间接修改样式）
Posted 言人冰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS笔记 类操作（通过修改元素的class属性来间接修改样式）相关的知识，希望对你有一定的参考价值。
通过更改类名来修改元素的属性
<style type="text/css">
.b1{
width: 150px;
height: 150px;
background-color: green;
}
.b2{
width: 250px;
height: 250px;
background-color: greenyellow;
}
</style>
<script>
window.onload = function(){
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function(){
box.className = "b2";
};
};
</script>
</head>
<body>
<button id="btn">按钮</button>
<br><br>
<div id="box" class="b1"></div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类的操作</title>
<style type="text/css">
.b1{
width: 150px;
height: 150px;
background-color: green;
}
.b2{
width: 250px;
height: 250px;
background-color: greenyellow;
}
</style>
<script>
window.onload = function(){
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var box = document.getElementById("box");
btn.onclick = function(){
addClass(box,"b2");
};
btn2.onclick = function(){
removeClass(box,"b2");
};
btn3.onclick = function(){
toggleClass(box,"b2");
};
/*定义一个函数，用来向一个元素中添加指定的class属性值
1、obj ： 要添加的class属性值的元素
2.cn: 要添加的class值
*/
function addClass(obj,cn){
//检查obj中是否含有cn
if(!hasClass(obj,cn)){
obj.className += " "+cn;
}
}
//为了使添加的class属性值不重复，写一个
//函数判断是否含有指定的class属性值
function hasClass(obj,cn){
//创建一个正则表达式
var reg = new RegExp("\\\\b"+cn+"\\\\b");
// \\b 标识判断是否为一个英文单词
return reg.test(obj.className);
}
function removeClass(obj,cn){
var reg = new RegExp("\\\\b"+cn+"\\\\b");
//删除class
obj.className = obj.className.replace(reg,"");
}
/*
toggleClass可以用来切换一个类
如果元素中具有该类，则删除
如果元素中没有该类，则添加
*/
function toggleClass(obj,cn){
if(hasClass(obj,cn)){
removeClass(obj,cn);
}
else{
addClass(obj,cn);
}
}
};
</script>
</head>
<body>
<button id="btn">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮1+2</button>
<br><br>
<div id="box" class="b1"></div>
</body>
</html>
以上是关于JS笔记 类操作（通过修改元素的class属性来间接修改样式）的主要内容，如果未能解决你的问题，请参考以下文章