原生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 ...
随机推荐
- C++ 学习笔记之 STL 队列
一. 引言 在算法以及数据结构的实现中,很多地方我们都需要队列(遵循FIFO,先进先出原则). 为了使用队列,我们可以自己用数组来实现队列,但自己写太麻烦不说,并且还很容易出错. 好在C++的STL ...
- 2019寒假训练营第三次作业part1-网络空间安全概论第五章
第五章 网络攻防技术 5.1 网路信息收集技术--网络踩点 黑客入侵系统之前,需要了解目标系统可能存在的: 管理上的安全缺陷和漏洞 网络协议安全缺陷与漏洞 系统安全缺陷与漏洞 黑客实施入侵过程中,需要 ...
- 全排列 next_permutation() 函数的用法
在头文件<algorithm>里面有如下代码: int a[]; do { } while(next_permutation(a,a+n)); 可产生1~n的全排列有如下代码: #incl ...
- parse_str — 将字符串解析成多个变量
$arr2="first=value1&second=value2&third[]=value3&third[]=value4"; parse_str($a ...
- 在intelllij中debug的时候使用log4j输出
一般在本地调试的时候,在控制台打印输出都会使用system.out.print,但是在线上运行的时候一般都是使用log4j进行日志输出. 那么在编写代码的时候,又不想写两份,直接写LOG是常规动作. ...
- 数据包从tcp->ip发出去
ip_local_out->OUTPUT->dst_out->ip_output-> POSTROUTING -->ip_output_finish 上面的路径中啊,在O ...
- MySQL常用存储引擎功能与用法详解
本文实例讲述了MySQL常用存储引擎功能与用法. MySQL存储引擎主要有两大类: 1. 事务安全表:InnoDB.BDB. 2. 非事务安全表:MyISAM.MEMORY.MERGE.EXAMPLE ...
- WPF绑定xaml中绑定对象需用属性表示,字段不可以绑定
在练习WPF绑定时发现对象属性可以在XAML中绑定,但字段是不可以绑定: 比如: private Person person{get;set;} 可以绑定到XAML中,<TextBox Nam ...
- 静态方法不能使用this的原因 当没有实例对象时候 在静态方法里面传入this时会出现空指针异常现象 所以为了防止该现象 静态方法里面不能使用this
静态方法不能使用this的原因 当没有实例对象时候 在静态方法里面传入this时会出现空指针异常现象 所以为了防止该现象 静态方法里面不能使用this
- BZOJ 2306 幸福路径(DP)
题解来源:http://www.cnblogs.com/jianglangcaijin/p/3799494.html 最后必然是走了一条链,或者是一个环(一直绕),或者是一条链加一个环.设f[i][j ...