一、为什么要对类操作
在之前的博客DOM操作CSS内联样式，写到操作的方法如下
box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "yellow";
style属性来修改元素的样式弊端：
- 1.每修改一个样式，浏览器就需要重新渲染一次页面
- 2.执行的性能是比较差的
- 3.当我们要修改多个样式时，也不太方便
希望达到的效果
- 一行代码，可以同时修改多个样式
那么如何实现？
- 类的操作
二、什么是类的操作
- 通过修改元素的class属性来间接的修改样式
举例：
效果图
实现效果：将box从左边样式实现到右边样式，比较好实现对吧，接下来通过类的操作实现
dody代码
重点看box的类属性是b1
<body>
<button id="btn01">点击按钮以后修改box的样式</button>
<br /><br />
<div id="box" class="b1"></div>
</body>
CSS代码
重点来了，两个类选择器
- b1点击按钮前的样式
- b2点击按钮后的样式
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
我们只要实现将b2的样式赋给box就行了，怎么覆盖呢，看JS代码
JS代码
btn01.onclick = function(){
box.className += " b2";
}
就中间一行代码，前面在onload事件中获取btn01及box对象就不写了
这就实现了效果图
接下来从浏览器角度看
box的class属性
- 点击按钮前:class=“b1”;
- 点击按钮后:class=“b1 b2”;
这就是对类的操作：修改元素的class属性来间接的修改样式
三、对类的操作封装函数
- 1.addClass():向一个元素中添加指定的class属性值
- 2.hasClass():判断一个元素中是否含有指定的class属性值
- 3.removeClass():删除一个元素中的指定的class属性
- 4.toggleClass():切换类属性值，有指定值删除，无添加
具体代码
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
* 参数:
* obj 要添加class属性的元素
* cn 要添加的class值
*
*/
function addClass(obj , cn){
//检查obj中是否含有cn
if(!hasClass(obj , cn)){
obj.className += " "+cn;
}
}
/*
* 判断一个元素中是否含有指定的class属性值
* 如果有该class，则返回true，没有则返回false
*/
function hasClass(obj , cn){
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
/*
* 删除一个元素中的指定的class属性
*/
function removeClass(obj , cn){
//创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
//删除class
obj.className = obj.className.replace(reg , "");
}
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类，则删除
* 如果元素中没有该类，则添加
*/
function toggleClass(obj , cn){
//判断obj中是否含有cn
if(hasClass(obj , cn)){
//有，则删除
removeClass(obj , cn);
}else{
//没有，则添加
addClass(obj , cn);
}
}
如何调用?
btn01.onclick = function(){
//之前的box.className += " b2";
toggleClass(box,"b2");
}
四、类操作好处
- 浏览器只需要重新渲染页面一次，性能比较好
- 使表现(CSS)和行为(JS)进一步的分离
