在一个元素中添加、删除或切换一个类
一、添加一个类
通常,我们在页面中要改变一个元素的样式时,会使用style属性来修改,比如下面的代码,在点击按钮后,通过修改style属性来改变元素的宽度、高度和背景颜色:
1 |
|
点击前:
点击后:
但是这样有一个问题,就是如果通过style属性来修改元素的样式,那么每修改一个样式,浏览器就需要重新渲染一次页面,这样的执行性能是比较差的,而且当我们要修改多个样式时,用这种方式也不太方便。
我们可以通过修改元素的class属性来间接的修改样式,这样一来,我们只需要修改一次即可同时修改多个样式,浏览器也只需要重新渲染一次页面,这样性能会比较好,并且这种方式,可以使表现和行为进一步地分离。
1 | <style> |
在box1的基础上再添加一个box2的类,记得要留一个空格,否则拼接之后类名变成box1box2
1 | btn1.onclick = function(){ |
将上面的方式,定义成一个函数addClass(),用来向一个元素中添加指定的class属性值,该函数接收两个参数:
- 第一个参数:obj,即要添加class属性的元素
- 第二个参数:cn,要添加的class值
1 | //定义一个函数addClass() |
虽然这样能添加一个class了,但是每点击一次按钮就会添加一次
这样是不必要的,因此我们还需要定义一个函数hasClass(),用来检查obj中是否已经含有cn:
1 | //判断一个元素中是否含有指定的class属性值,如果有该class,则返回true,没有则返回false |
在addClass()函数中,首先判断obj中是否含有cn,如果没有则给它添加,如果有则不再添加
1 | function addClass(obj , cn){ |
此时,无论点击按钮多少次,box2都只会被添加一次
二、删除一个类
如果想要删除某个class,只需要把该class替换成一个空字符串即可,我们定义一个函数removeClass(),用来删除一个元素中指定的class:
1 | function removeClass(obj , cn){ |
三、切换一个类
定义一个函数toggleClass()用来切换一个类,如果元素中具有该类则删除,如果元素中没有该类则添加:
1 | function toggleClass(obj , cn){ |