惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Security Archives - TechRepublic
Security Archives - TechRepublic
D
Docker
D
DataBreaches.Net
V
Vulnerabilities – Threatpost
P
Palo Alto Networks Blog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
IT之家
IT之家
L
LINUX DO - 热门话题
T
The Blog of Author Tim Ferriss
雷峰网
雷峰网
Project Zero
Project Zero
T
Threatpost
D
Darknet – Hacking Tools, Hacker News & Cyber Security
宝玉的分享
宝玉的分享
Stack Overflow Blog
Stack Overflow Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
C
CXSECURITY Database RSS Feed - CXSecurity.com
S
Securelist
Cisco Talos Blog
Cisco Talos Blog
Google DeepMind News
Google DeepMind News
Scott Helme
Scott Helme
The Cloudflare Blog
Know Your Adversary
Know Your Adversary
T
Tor Project blog
博客园_首页
人人都是产品经理
人人都是产品经理
博客园 - 叶小钗
Security Latest
Security Latest
Cyberwarzone
Cyberwarzone
S
Schneier on Security
T
The Exploit Database - CXSecurity.com
H
Help Net Security
Simon Willison's Weblog
Simon Willison's Weblog
阮一峰的网络日志
阮一峰的网络日志
C
Cyber Attacks, Cyber Crime and Cyber Security
P
Proofpoint News Feed
AWS News Blog
AWS News Blog
The GitHub Blog
The GitHub Blog
P
Proofpoint News Feed
T
Troy Hunt's Blog
量子位
G
GRAHAM CLULEY
O
OpenAI News
Engineering at Meta
Engineering at Meta
博客园 - Franky
SecWiki News
SecWiki News
F
Fortinet All Blogs
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com

博客园 - givebest

Glarity Summary - 利用 ChatGPT为Bilibili及YouTube视频内容生成摘要 (免费无广告) Nodejs CMS——基于 NestJS/NuxtJS 的完整开源项目 Vee-validate 父组件获取子组件表单校验结果 Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验 又拍云 Node.js 实现文件上传、删除 Docz 用 MDX 写 React UI 组件文档 - givebest Mac 远程连接 Windows - givebest 更优雅的方式: JavaScript 中顺序执行异步函数 Node.js 上传文件 - givebest - 博客园 win10 系统右键菜单不显示文字(只有小图标)修复方法 JavaScript 排序算法(JavaScript sorting algorithms) JavaScript addEventListener 第三个参数 webpack 实现的多入口项目脚手架 Kindle电子阅读器收不到个人文档推送解决方案 纯CSS3大转盘抽奖(响应式、可配置) - givebest - 博客园 JavaScript简单分页,兼容IE6,~3KB JavaScript闭包(Closure) GitHub Pages 绑定二级域名 - givebest HTML5 Canvas绘制转盘抽奖 - givebest - 博客园
原生JavaScript实现hasClass、addClass、removeClass、toggleClass - givebest - 博客园
givebest · 2016-08-20 · via 博客园 - givebest

兼容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
trimhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

由于现代浏览器都基本支持了classList,所以移动端可以直接使用classList会更方便一些,如:

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不支持

  1. 应该避免直接使用多个参数,支持不全面。
  2. SVGMathML 元素支持度也不全面(这个坑下面的代码并未填上,请熟知,有兴趣的可以查下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(/[1]+|[\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(/[2]+|[\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


  1. \s\uFEFF\xA0 ↩︎

  2. \s\uFEFF\xA0 ↩︎