js实现类名的添加与移除
方法1:使用className属性;
方法2:使用classList API;
//用于匹配类名存在与否
function reg(name){
return new RegExp('(^|\\s)'+name+'(\\s+|$)');
} //hasClass addClass removeClass toogleClass
var hasClass,addClass,removeClass;
if('classList' in document.documentElement){
hasClass = function(obj, cname) { // obj为要操作的元素对象,cname是类名
return obj.classList.contains(cname);
};
addClass = function(obj, cname) {
obj.classList.add(cname);
};
removeClass = function(obj,cname) {
obj.classList.remove(cname);
};
toggleClass = function(obj, cname) {
obj.classList.toggle(cname);
};
}else{
hasClass = function(obj, cname) {
return reg(cname).test(obj.className);
};
addClass = function(obj, cname) {
if(!hasClass(obj,cname)){
obj.className=obj.className+' '+cname;
}
};
removeClass = function(obj, cname) {
obj.className=obj.className.replace(reg(cname),' ');
};
toggleClass = function(obj, cname) {
var toggle=hasClass(obj,cname)?removeClass:addClass;
toggle(obj,cname);
};
} //true
document.body.classList.toString() === document.body.className;
注意:这种方法每次只能传一个类名且不能级联操作,而jquery下面的类似操作是可以操作多个类名的。
所以扩展一下:
//addClass
DOMTokenList.prototype.addClass = function(str) {
tts.split(' ').forEach(function(c){
this.add(c);
}.bind(this));
return this;
} //removeClass
DOMTokenList.prototype.removeClass = function(str) {
tts.split(' ').forEach(function(t){
this.remove(t);
}.bind(this));
return this;
} //removeClass
DOMTokenList.prototype.toggleClass = function(str) {
tts.split(' ').forEach(function(t){
this.toggle(t);
}.bind(this));
return this;
}
js实现类名的添加与移除的更多相关文章
- js中数组的添加和移除
1.引入js文件 <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>2.HTML中代 ...
- js操作DOM动态添加和移除事件
非IE下,注意事件名不带on,如onclick为click 添加事件:DOM对象.addEventListener('事件名',函数名,true/false); 删除事件:DOM对象.removeEv ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- javaScript 添加和移除class类名的几种方法
添加类属性: // 一次只能设置一个类值,如果当前属性本身存在类值,会被替换 element.className = '类名'; /* * .setAttribute 用来设置自定义属性和值的 * 自 ...
- JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点
DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...
- jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
- js进阶 9-14 js如何实现下拉列表多选移除
js进阶 9-14 js如何实现下拉列表多选移除 一.总结 一句话总结: 1.js如何实现下拉列表多选移除? 把这个下拉列表中的option移除,然后加到另外一个下拉列表(文字)中去.remove方法 ...
- DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...
- spring:如何用代码动态向容器中添加或移除Bean ?
先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...
随机推荐
- PHP 基础篇 - PHP 的 BC MATH 系列数学函数
一.常见问题 用 PHP 做计算时经常会遇到精度带来的问题,下面来看两个常见的例子: 1. 运算比较 下面表达式输出的结果不是相等: <?php echo 2.01 - 0.01 == 2 ? ...
- Spring框架第四篇之基于注解的DI注入
一.说明 与@Component注解功能相同,但意义不同的注解还有三个: 1)@Repository:注解在Dao实现类上 2)@Service:注解在Service实现类上 3)@Controlle ...
- django xadmin的全局配置
在adminx.py中增加 class BaseSetting(object): enable_themes = True use_bootswatch = True class GlobalSett ...
- Python 集合(set)的使用总结
集合的特点:去重.无序,因此无法通过下标取值. 1. 定义集合 s = set() #定义空的集合 s2 = {'} # 不是key -value形式的话就是集合,不是字典 s3 ={'} print ...
- Windows server 2003 伪静态配置方法
Windows server 2003 伪静态配置方法 先我们下载Rewrite伪静态组件到服务器,然后解压到D:\Rewrite下,解压后如下图: 提示:ReWrite组件所在目录要有网站所有者 ...
- 解决 ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务
速度太慢点击了一下优化,出现了 ORA-12514,搜索了解决方法记录一下,第一个基本服务就解决了. 转自:http://apps.hi.baidu.com/share/detail/19115407 ...
- Codeforces Round #430 (Div. 2) C. Ilya And The Tree
地址:http://codeforces.com/contest/842/problem/C 题目: C. Ilya And The Tree time limit per test 2 second ...
- [转]Algolia的分布式搜索网络架构
转自:http://www.csdn.net/article/2015-03-11/2824176-the-architecture-of-algolias-distributed-search-ne ...
- 资料:mnist.pkl.gz数据包的下载以及数据内容解释
deeplearning.net/data/mnist/mnist.pkl.gz The MNIST dataset consists of handwritten digit images and ...
- Linux 安全配置指南
1.Bios Security 一定要给Bios设置密码,以防通过在Bios中改变启动顺序,而可以从软盘启动.这样可以阻止别人试图用特殊的启动盘启动你的系统,还可以阻止别人进入Bios改动其中的设置( ...