类名操作
在前端中，我们常常需要进行类名操作，大致有以下4种
-
Has(el, class)
检查el的类中是否包含class类名 -
Add(el, class)
向el类中添加class类名 -
Remove(el, class)
从el类中移除class类名 -
Toggle(el, class)
如果el中包含class，就移除它，反之，添加它
类名操作的意义
通过类名操作，我们可以改变元素的类名，进而改变元素的行为和渲染方式。
类名操作的例子
编写一个modal插件时，.open类的css样式中包含opacity: 1属性，而.close中包含opacity:0。我们可以通过增添或者移除(toggle)div.modal元素的open和close类名，来控制div.modal元素的可见性。
增减类名同样可以触发transition事件，编写.close和.open中的transition属性可以达到定制动画效果。
类名操作相关的webAPI
classList
API
- add
- remove
- item
- toggle
- contains
classList包含了完整的类名操作函数，但不一定兼容所有浏览器。
className
API
返回class属性的值
使用正则表达式编写完整API
inspired by bonzo
首先定义寻找类-正则表达式
var classReg = function(className){
return new RegExp("(^|\\s+)"+className+"(\\s+|$)");
}
- has
var has = function(element, className) {
return classReg(className).test(element.className)；
}
- add
var add = function(element, className){
if( !has(element, className) ) {
element.className += ' '+className;
}
}
- remove
var remove = function(element, className) {
element.className = element.className.replace(classReg(className), ' ');
}
- toggle
var toggle = function(element, className) {
var fn = has(element,className)?remove:add;
fn(element, className);
}
通过库或者自行实现API，我们可以使用className来进行类名操作。
