原生JavaScript实现hasClass、addClass、removeClass、toggleClass
兼容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
原生JavaScript实现hasClass、addClass、removeClass、toggleClass的更多相关文章
- 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jQuery addClass removeClass toggleClass hasClass is(.class)用法
jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...
- 原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
- 原声js实现addClass removeClass toggleClass效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]
1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...
- addClass, removeClass, toggleClass(从jquery中抠出来)
<div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...
- class 添加样式,删,开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- class 添加样式,删除,开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- .addClass(),.removeClass(),.toggleClass()的区别
.addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...
随机推荐
- Asp.net Core中使用Session
前言 2017年就这么悄无声息的开始了,2017年对我来说又是特别重要的一年. 元旦放假在家写了个Asp.net Core验证码登录, 做demo的过程中遇到两个小问题,第一是在Asp.net Cor ...
- SSH实战 · 唯唯乐购项目(中)
用户模块 三:一级分类的查询 创建一级分类表并导入基本数据 CREATE TABLE `category` ( `cid` int(11) NOT NULL AUTO_INCREMENT, ` ...
- TODO:Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- Android raw to bmp
Android raw 格式转 bmp 图像 raw 保存的为裸数据,转换时都需要把它转成RGBA 的方式来显示.其中: 8位RAW: 四位RGBA 来表示一位灰度; 24位RAW: 三位RGB相同, ...
- .NET Core的日志[3]:将日志写入Debug窗口
定义在NuGet包"Microsoft.Extensions.Logging.Debug"中的DebugLogger会直接调用Debug的WriteLine方法来写入分发给它的日志 ...
- 理解 .NET Platform Standard
相关博文:ASP.NET 5 Target framework dnx451 and dnxcore50 .NET Platform Standard:https://github.com/dotne ...
- How those spring enable annotations work--转
原文地址:http://blog.fawnanddoug.com/2012/08/how-those-spring-enable-annotations-work.html Spring's Java ...
- 【置顶】CoreCLR系列随笔
CoreCLR配置系列 在Windows上编译和调试CoreCLR GC探索系列 C++随笔:.NET CoreCLR之GC探索(1) C++随笔:.NET CoreCLR之GC探索(2) C++随笔 ...
- C#创建、安装、卸载、调试Windows Service(Windows 服务)的简单教程
前言:Microsoft Windows 服务能够创建在它们自己的 Windows 会话中可长时间运行的可执行应用程序.这些服务可以在计算机启动时自动启动,可以暂停和重新启动而且不显示任何用户界面.这 ...
- DDD领域驱动设计 - 设计文档模板
设计文档模板: 系统背景和定位 业务需求描述 系统用例图 关键业务流程图 领域语言整理,主要是整理领域中的各种术语的定义,名词解释 领域划分(分析出子域.核心域.支撑域) 每个子域的领域模型设计(实体 ...