原生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 ...
随机推荐
- 如果Python对于磁盘没有写入权限,还会运行吗?
Python如果对于磁盘没有写入权限,那么编译成功的字节码文件就只会存储在内存当中,而不会写入到磁盘,每次运行Python都会重新编译,然后运行.
- Python运行的方式
Python的运行方式多种多样,下面列举几种: 交互式 在命令行中输入python,然后在>>>提示符后面输入Python语句,这里需要注意: 1 语句前面不能有空格,否则会报错 2 ...
- 《剑指Offer》题十一~题二十
十一.旋转数组的最小数字 题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如,数组{3, 4, 5, 1, 2}为{ ...
- JavaWeb基础 - 会话
会话概述 什么是会话 简单的理解:用户打开浏览器,点击多个超链接,访问Web服务器上多个资源,然后关闭浏览器,整个过程称之为一次会话. 需要解决的问题 每个用户在使用浏览器与服务器会话的过程中,会产生 ...
- LintCode-378.将二叉查找树转换成双链表
将二叉查找树转换成双链表 将一个二叉查找树按照中序遍历转换成双向链表. 样例 给定一个二叉查找树: 返回 1<->2<->3<->4<->5. 标签 链 ...
- node 第一天
在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可 ...
- 如何进行Linux Kernel 开发
转自:http://www.cppblog.com/flyonok/archive/2011/04/15/144316.html 如何进行Linux Kernel 开发? (Take 3) 译者序:这 ...
- java 基础 --多态--009
1, 多态:同一个对象(事物),在不同时刻体现出来的不同状态 2, 多态的前提: A: 要有继承关系 B: 要有方法的重写 C: 要有父类引用指向子类对象 父 f = new 子(); 3, 多态访问 ...
- C#中的is和as操作符
在C#语言中进行类型转换的操作符is和as.is和as都是强制类型转换,但这两者有什么相同之处和不同之处呢?在使用is和as需要注意哪些事项?下面我们从简单的代码示例去探讨这个简单的问题.注:此博文只 ...
- udp->ip & tcp->ip 发送数据包的目的地址的源地址是什么时候确定的?
udp->ip & tcp->ip udp到ip层是:ip_send_skb tcp到ip层是: ip_queue_xmit 拿tcp为例,在使用[ip_queue_xmit, i ...