(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的兼容的更多相关文章

  1. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  2. 黄聪:原生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 ...

  3. 原生js模仿jq fadeIn fadeOut效果 兼容IE低版本

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 原生JS实现addClass,removeClass,toggleClass

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...

  5. 原生JS编写getByClass、addClass、removeClass、hasClass

    前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...

  6. jQuery addClass removeClass toggleClass hasClass is(.class)用法

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

  7. js实现css、addClass、removeClass和toggleClass

    JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象 ...

  8. 原生js :removeClass和addClass

    function removeClass(obj, aClass) { var re = new RegExp('\\b' + aClass + '\\b'); if (obj.className ! ...

  9. JS:操作样式表2 :用JS实现添加和删除一个类名的功能(addClass()和removeClass())

    var box = document.getElementById("box"); box.id = "pox"; 将id = “box”,改为id = “po ...

随机推荐

  1. window对象与document对象的区别

    [window对象] 它是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口. 属性 defaultStatus 缺省的状态条消息 document 当前显示的文档(该属性本身也是一个对象) fra ...

  2. Java中 Auto-boxing/unboxing

    Java 中 Auto-boxing/unboxing 机制,在合适的时机自动打包,解包. 1. 自动将基础类型转换为对象: 2. 自动将对象转换为基础类型: Demo_1: import java. ...

  3. 向redis插入数据时,返回值问题

    向redis插入数据时,如果redis没有要插入的key,插入成功之后返回值为1 如果redis有这个key,插入成功之后返回值是0

  4. LintCode-365.二进制中有多少个1

    二进制中有多少个1 计算在一个 32 位的整数的二进制表式中有多少个 1. 样例 给定 32 (100000),返回 1 给定 5 (101),返回 2 给定 1023 (111111111),返回 ...

  5. Web界面和Winform界面生成,代码生成工具

    在上面一篇随笔<代码生成工具之界面快速生成>介绍了代码生成工具Database2Sharp的界面生成操作,其中介绍了Web界面(包括列表界面.内容显示.内容编辑界面的生成,另外还介绍了Wi ...

  6. 3dContactPointAnnotationTool开发日志(四)

      没办法,为了能在寝室接着做这玩意只好又在电脑上装一个和实验室版本一样的unity了.虽然打开后UI界面还是一团糟,不过至少要的东西都在,又手动调了调UI界面.   然后把旋转视角功能加上了.鼠标右 ...

  7. 关于如何解决PHPCMS V9内容搜索显示不全问题解决方案

    站长朋友们都晓得只要是开源的PHP程序都会有漏洞存在.如果想完美的建站就需要自己去研究打补丁了.最近很多站长联系小编咨询用phpcms建站当在首页搜索内容的时候有的居然搜索不到.小编感到很是奇怪于是就 ...

  8. Winform 数据绑定

    1.DataGridView数据绑定 namespace WindowsFormsApplication1 { public partial class Form1 : Form { private ...

  9. tcp中的发送窗口是啥意思?

    初始的三次握手: 02:52:36.585412 IP 127.0.0.1.59764 > 127.0.0.1.8000: Flags [S], seq 3800457532, win 4369 ...

  10. Android基础------SQLite数据库(二)

    1.操作SQLite数据库 1.1 execSQL() 可以执行insert.delete.update和CREATE TABLE之类有更改行为的SQL语句 1.2 rawQuery() 可以执行se ...