原生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 ...
随机推荐
- "Hello world!"团队第一次会议
今天是我们"Hello world!"团队第一次召开会议,今天的会议可能没有那么正式,但是我们一起确立了选题——基于WEB的售票系统.博客内容是: 1.会议时间 2.会议成员 3. ...
- c# 读取xml文件 编写form
主要思想:xml保存控件的数据,c#读取出来并加以显示. 难点:1.控件有父容器和子控件的关系:2.控件事件的添加. 1.控件有父容器和子控件的关系: 可以用绝对坐标在xml文件中先读取子控件再读取父 ...
- 2d命令行小游戏源码
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Java容器之Set接口
Set 接口: 1. Set 接口是 Collection 的子接口,Set 接口没有提供额外的方法,但实现 Set 接口的容器类中的元素是没有顺序的,且不可以重复: 2. Set 容器可以与数学中的 ...
- Jenkins系列-Jenkins通过Publish over SSH插件实现远程部署
配置ssh免秘钥登录 安装Publish over SSH插件 插件使用官网:https://wiki.jenkins.io/display/JENKINS/Publish+Over+SSH+Plug ...
- 在线api查询网站
1.包含各种常用的语言 http://tool.oschina.net/apidocs
- 异步请求Python库 grequests的应用和与requests库的响应速度的比较
requests库是python一个优秀的HTTP库,使用它可以非常简单地执行HTTP的各种操作,例如GET.POST等.不过,这个库所执行的网络请求都是同步了,即cpu发出请求指令后,IO执行发送和 ...
- 使用dom4j修改XML格式的字符串
XML格式 <data> <ryzd> <record> <western> <record> <diagnoses> < ...
- P3986 斐波那契数列
题目描述 定义一个数列: f(0)=a,f(1)=b,f(n)=f(n−1)+f(n−2) 其中 a,b均为正整数,n≥2 . 问有多少种 (a,b),使得 k 出现在这个数列里,且不是前两项. 由于 ...
- ubuntu简易教程(如何使用noi linux)
目录 linux环境下的基础操作 命令行操作 编辑器 程序编译 程序调试 gdb的使用 对拍 在提高组的考试中要求使用noi linux,因此了解一下如何在linux环境下编程是很有必要的. linu ...