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 ...
随机推荐
- 002-Spring Boot将WAR文件部署到Tomcat
一.概述 springboot 带有内置Tomcat 服务器,可以直接将项目打包成jar运行,如果在需要把项目打成war包,使用外置tomcat部署.下面是将springboot项目部署为war项目的 ...
- php与oracle11g经典分页
<?php $t1 = xdebug_time_index(); $conn = oci_connect("SCOTT","TIGER","19 ...
- (转 )C++ static、const和static const 以及它们的初始化
const定义的常量在函数执行之后其空间会被释放,而static定义的静态常量在函数执行后不会被释放其空间.但不论是Const还是static 他们定义的内容都会随着程序的结束而被系统清楚. sta ...
- Selenium的PageFactory & PageObject 在大型项目中的应用
因为最近遇到的技术问题一直没找到可行的解决办法,一直在翻看selenium的源代码,之前写测试代码的时候就是拿来即用,写什么功能啊,就按手动的操作步骤去转换,近日看到一个文章,又去wiki上查了查,觉 ...
- HTML5游戏开发系列教程8(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...
- SqlAlchemy 中操作数据库时session和scoped_session的区别(源码分析)
原生session: from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine from sqlalch ...
- 001-netty的优势
1.API简单. 2.性能高. 3.成熟稳定. 4.入门门槛低.
- mongodb中的_id的ObjectId的生成规则
MongoDB中存储的文档必须有一个"_id" .这个键值可以是任何类型,默认是ObjectID对象.在一个集合里,每个文档都有一个唯一的“_id”,确保集合里的每个文档都能被唯一 ...
- Phoenix编译支持CDH
作者:Syn良子 出处:http://www.cnblogs.com/cssdongl/p/6898227.html 转载请注明出处 最近由于想调研下低延迟的数据查询框架,那么基于SQL on Hba ...
- 由浅入深之Tensorflow(4)----Saver&restore
x = tf.placeholder(tf.float32) y = tf.placeholder(tf.float32) w = tf.Variable(tf.zeros([1, 1], dtype ...