原生JavaScript实现hasClass、addClass、removeClass、toggleClass
2024-10-16 20:44:08
兼容IE6+，因IE6、IE7、IE8不支持Array.prototype.indexOf()和String.prototype.trim()，分别用Polyfill实现支持。
详细：
indexOf https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
trim： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
由于现代浏览器都基本支持了classList，所以移动端可以直接使用classList会更方便一些，如：
<div class="foo bar" id="div"></div>
var div = document.getElementById('div');
div.classList.remove("foo");
div.classList.add("anotherclass");
div.classList.toggle("visible");
div.classList.contains("foo"); //
div.classList.add("foo","bar"); //Android4.3不支持
- 应该避免直接使用多个参数，支持不全面。
SVG和MathML元素支持度也不全面（这个坑下面的代码并未填上，请熟知，有兴趣的可以查下Zepto是怎么填坑的）。
classList支持明细： http://caniuse.com/#search=classList
代码
Polyfill
// 让低版本IE支持 Array.prototype.indexOf
// Polyfill (indexOf @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement, fromIndex) {
var k;
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
var len = o.length >>> 0;
if (len === 0) {
return -1;
}
var n = +fromIndex || 0;
if (Math.abs(n) === Infinity) {
n = 0;
}
if (n >= len) {
return -1;
}
k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
while (k < len) {
if (k in o && o[k] === searchElement) {
return k;
}
k++;
}
return -1;
};
}
// 让低版本IE支持 String.prototype.trim()
// Polyfill (trim @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
if (!String.prototype.trim) {
String.prototype.trim = function(){
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}
支持 classList 实现方式
function ctrlClass(opts) {
if (!opts.ele || !opts.c) return false;
// console.log(opts.c)
var c = null;
typeof (opts.c) === 'string' ?
c = opts.c.trim().replace(/\s+/g, ' ').split(' ') :
c = opts.c; //修复不规范传参
return opts.fun({
ele: opts.ele,
c: c
});
opts.ele = null;
}
/**
* hasClass
* @param (element, 'c1 c2 c3 c4 c5')
*/
function hasClass(ele, c) {
return ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
return opts.c.every(function(v) {
return !!opts.ele.classList.contains(v);
});
}
});
}
/**
* addClass
* @param (element, 'c1 c2 c3 c4 c5')
*/
function addClass(ele, c) {
return ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c;
c.forEach(function(v) {
if (!hasClass(ele, v)) {
ele.classList.add(v);
}
});
}
})
}
/**
* removeClass
* @param (element, 'c1 c2 c3')
*/
function removeClass(ele, c) {
ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c;
c.forEach(function(v) {
// TODO 是否有必要判断 hasClass
// if (!hasClass(ele, v)) {
ele.classList.remove(v);
// }
});
}
});
}
/**
* toggleClass
* @param (element, 'c1 c2 c3')
*/
function toggleClass(ele, c) {
ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c;
c.forEach(function(v) {
ele.classList.toggle(v);
})
}
})
}
不支持 classList 实现方式
/**
* hasClass
* @param (element, 'c1 c2 c3 c4 c5')
*/
function hasClass(ele, c) {
return ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var cln = opts.ele.className.split(' ');
var c = opts.c;
for (var i = 0; i < c.length; i++) {
if(cln.indexOf(c[i]) !== -1){
return true;
}
}
return false;
}
});
}
/**
* addClass
* @param (element, 'c1 c2 c3')
*/
function addClass(ele, c) {
ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c;
for (var i = 0; i < c.length; i++) {
if(!hasClass(ele, c[i])) {
ele.className = ele.className !== '' ? (ele.className + ' ' + c[i]) : c[i];
}
}
}
});
}
/**
* removeClass
* @param (element, 'c1 c2 c3')
*/
function removeClass(ele, c) {
ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c,
cln = ele.className.split(' ');
for (var i = 0; i < c.length; i++) {
if (hasClass(ele, c[i])) {
cln.splice(cln.indexOf(c[i]), 1);
}
}
ele.className = cln.join(' ');
}
});
}
/**
* toggleClass
* @param (element, 'c1 c2 c3')
*/
function toggleClass(ele, c){
ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c;
for (var i = 0; i < c.length; i++) {
!!hasClass(ele, c[i]) ? removeClass(ele, c[i]) : addClass(ele, c[i]);
}
}
});
}
完整代码
// Polyfill (indexOf @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement, fromIndex) {
var k;
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
var len = o.length >>> 0;
if (len === 0) {
return -1;
}
var n = +fromIndex || 0;
if (Math.abs(n) === Infinity) {
n = 0;
}
if (n >= len) {
return -1;
}
k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
while (k < len) {
if (k in o && o[k] === searchElement) {
return k;
}
k++;
}
return -1;
};
}
// Polyfill (trim @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
if (!String.prototype.trim) {
String.prototype.trim = function(){
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}
var cl = ('classList' in document.createElement('a'));
function ctrlClass(opts) {
if (!opts.ele || !opts.c) return false;
// console.log(opts.c)
var c = null;
typeof (opts.c) === 'string' ?
c = opts.c.trim().replace(/\s+/g, ' ').split(' ') :
c = opts.c; //修复不规范传参
return opts.fun({
ele: opts.ele,
c: c
});
opts.ele = null;
}
// 支持 classList
if(cl){
/**
* hasClass
* @param (element, 'c1 c2 c3 c4 c5')
*/
function hasClass(ele, c) {
return ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
return opts.c.every(function(v) {
return !!opts.ele.classList.contains(v);
});
}
});
}
/**
* addClass
* @param (element, 'c1 c2 c3 c4 c5')
*/
function addClass(ele, c) {
return ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c;
c.forEach(function(v) {
if (!hasClass(ele, v)) {
ele.classList.add(v);
}
});
}
})
}
/**
* removeClass
* @param (element, 'c1 c2 c3')
*/
function removeClass(ele, c) {
ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c;
c.forEach(function(v) {
// TODO 是否有必要判断 hasClass
// if (!hasClass(ele, v)) {
ele.classList.remove(v);
// }
});
}
});
}
/**
* toggleClass
* @param (element, 'c1 c2 c3')
*/
function toggleClass(ele, c) {
ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c;
c.forEach(function(v) {
ele.classList.toggle(v);
})
}
})
}
}else{
/**
* hasClass
* @param (element, 'c1 c2 c3 c4 c5')
*/
function hasClass(ele, c) {
return ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var cln = opts.ele.className.split(' ');
var c = opts.c;
for (var i = 0; i < c.length; i++) {
if(cln.indexOf(c[i]) !== -1){
return true;
}
}
return false;
}
});
}
/**
* addClass
* @param (element, 'c1 c2 c3')
*/
function addClass(ele, c) {
ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c;
for (var i = 0; i < c.length; i++) {
if(!hasClass(ele, c[i])) {
ele.className = ele.className !== '' ? (ele.className + ' ' + c[i]) : c[i];
}
}
}
});
}
/**
* removeClass
* @param (element, 'c1 c2 c3')
*/
function removeClass(ele, c) {
ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c,
cln = ele.className.split(' ');
for (var i = 0; i < c.length; i++) {
if (hasClass(ele, c[i])) {
cln.splice(cln.indexOf(c[i]), 1);
}
}
ele.className = cln.join(' ');
}
});
}
/**
* toggleClass
* @param (element, 'c1 c2 c3')
*/
function toggleClass(ele, c){
ctrlClass({
ele: ele,
c: c,
fun: function(opts) {
var ele = opts.ele,
c = opts.c;
for (var i = 0; i < c.length; i++) {
!!hasClass(ele, c[i]) ? removeClass(ele, c[i]) : addClass(ele, c[i]);
}
}
});
}
}
使用
var ele = document.getElementById('test');
hasClass(ele, 'c1');
addClass(ele, 'c1 c2 c3');
removeClass(ele, 'c1 c2 c3');
toggleClass(ele, 'c1 c2 c3');
项目
https://github.com/givebest/ctrl-cssClass
最新文章
- Spring 4 创建REST API
- iOS开发者联系 联系方式
- ActiveRecord中andFilterWhere使用
- VNC的安装与配置
- Python内置函数filter, map, reduce
- codeforces 590B B. Chip 'n Dale Rescue Rangers(二分+计算几何)
- VirtrualBox 搭建本地lamp环境
- HDU 1087 Super Jumping! Jumping! Jumping!（最长上升子序列，dp）
- 从ng-repeat到NgFor
- android 通过代码设置drawableLeft
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
- Ubuntu 虚拟机支持与windows机器复制粘贴
- 左边label随着右边textarea高度自适应
- vagrant极简教程：快速搭建centos7
- ----regular expression in js----
- ios 输入框问题
- linux交换区使用过多导致的性能问题
- redis ERR This instance has cluster support disabled
- 关于Android不能启动的问题
- more命令(转)