原生js addclass,hasClass,removeClass,toggleClass的兼容
(function (window) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass,
addClass,
removeClass;
if ('classList' in document.documentElement) {
hasClass = function (elem, c) {
return elem.classList.contains(c);
};
addClass = function (elem, c) {
elem.classList.add(c);
};
removeClass = function (elem, c) {
elem.classList.remove(c);
};
} else {
hasClass = function (elem, c) {
return classReg(c).test(elem.className);
};
addClass = function (elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function (elem, c) {
elem.className = elem.className.replace(classReg(c), ' ');
};
}
function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}
var classie = {
// full names
hasClass : hasClass,
addClass : addClass,
removeClass : removeClass,
toggleClass : toggleClass,
// short names
has : hasClass,
add : addClass,
remove : removeClass,
toggle : toggleClass
};
// transport
if (typeof define === 'function' && define.amd) {
// AMD
define(classie);
} else {
// browser global
window.classie = classie;
}
})(window);
经测试,兼容IE8以下;
参考:https://github.com/ded/bonzo,
原生js addclass,hasClass,removeClass,toggleClass的兼容的更多相关文章
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- 黄聪:原生js的音频播放器,兼容pc端和移动端(原创)
更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...
- 原生js模仿jq fadeIn fadeOut效果 兼容IE低版本
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
- 原生JS编写getByClass、addClass、removeClass、hasClass
前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...
- jQuery addClass removeClass toggleClass hasClass is(.class)用法
jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...
- js实现css、addClass、removeClass和toggleClass
JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象 ...
- 原生js :removeClass和addClass
function removeClass(obj, aClass) { var re = new RegExp('\\b' + aClass + '\\b'); if (obj.className ! ...
- JS:操作样式表2 :用JS实现添加和删除一个类名的功能(addClass()和removeClass())
var box = document.getElementById("box"); box.id = "pox"; 将id = “box”,改为id = “po ...
随机推荐
- Thunder团队第六周 - Scrum会议6
Scrum会议6 小组名称:Thunder 项目名称:i阅app Scrum Master:邹双黛 工作照片: 邹双黛同学在拍照,所以不在照片内. 参会成员: 王航:http://www.cnblog ...
- 20172330 2017-2018-1 《Java程序设计》第七周学习总结
学号 2017-2018-1 <程序设计与数据结构>第七周学习总结 教材学习内容总结 这一章主要是对继承的学习: 继承是组织和创建类的基本技术,概念简单但影响重大,决定着面向对象软件的设计 ...
- P4编程环境搭建
本文参照了sdnlab上相关文章的搭建推荐. 使用的系统环境为ubuntu 18.04 组件介绍 主要安装五个组件: BMv2:是一款支持P4编程的软件交换机 p4c:是一款P4的编译器 PI:是P4 ...
- (转)apktool+dex2jar+jd_gui
转:http://www.cnblogs.com/MichaelGuan/archive/2011/10/25/2224578.html apktool: 可以解析资源文件,比如布局文件xml等,方便 ...
- LintCode-71.二叉树的锯齿形层次遍历
二叉树的锯齿形层次遍历 给出一棵二叉树,返回其节点值的锯齿形层次遍历(先从左往右,下一层再从右往左,层与层之间交替进行) 样例 给出一棵二叉树 {3,9,20,#,#,15,7}, 返回其锯齿形的层次 ...
- 【week4】课堂Scrum站立会议
项目:连连看游戏 小组名称:天天向上(旁听) 小组成员:张政 张金生 李权 武致远 已完成任务 1.本项目采用c#. 2. 初步界面. 形成一个windows下的游戏界面,每个需要消除的方块是一个bu ...
- cURL和file_get_contents实现模拟post请求
以前面试时候,面试官问过我后端有没有跨域问题,但是不敢肯定,现在可以肯定的说没有. 不文用php的cURL和file_get_contents方法分别实现后端跨域.本文场景也是在tp5下实现的. 一, ...
- 生活中的goto
if(你是个傻逼?){ out.println("继续你的傻逼生活吧!"); }else(你不是傻逼?){ out.println("你说不是都不是啊,继续你的傻逼生活吧 ...
- vector中数据进行去重和排序
, , , , , , ,}; std::vector<int> vec(a, a+sizeof(a)/sizeof(int) ); std::sort(vec.begin(), vec. ...
- C# 中的语法糖
1. using 代替了 try-catch-finally 因为之前是学 Java 的,在连接数据库或者进行文件读写操作时很自然的就使用了 try-catch-finally-,在 C# 中这样 ...