基于JavaScript实现类名的添加与移除

方法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){
  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;
}

以上所述是小编给大家介绍的JavaScript实现类名的添加与移除方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 关于vue.js过渡css类名的理解(推荐)

    关于vue.js过渡css类名的理解(推荐)

    首先附上官方文档图. 总体就是在解释v-enter,v-enter-active,v-leave,v-leave-active的意思,但是我看了半天,就是看不懂,老是和鼠标的mouseover和mouseout事件联想在一起,在经过多方的查找,总算是理解了,以下就是我所理解的意思,希望对路过的有所帮助,更希望路过的能帮我检查检查. start: 首先,通过一个例子来说明,实践是检验真理的唯一标准. 结果:点击按钮,show=false时,div消失:再次点击,show=true,div用蓝色逐渐

  • javascript实现类似java中getClass()得到对象类名的方法

    本文实例讲述了javascript实现类似java中getClass()得到对象类名的方法.分享给大家供大家参考.具体如下: 在javascript中没有能够返回特定类型名的函数 如一个对象 console.log(obj); 得到的是[object HtmlTableCellElement]如果想要一个函数能够返回HtmlTableCellElement js中默认没有这样的函数 可以自己实现一个 var getObjectClass = function (obj) { if (obj &&a

  • 获取JavaScript用户自定义类的类名称的代码

    我们知道,虽然JavaScript是基于对象(object-based)的语言.但是使用其原形(prototype)特性,我们完全可以实现十分sexy的OO编成框架,这个可以看看经典论坛的文章'基本上实现 javascript 的 OOP (0423版)'. 不过虽然我们实现了'类'这种概念,可是JavaScript的脚本系统却仍然是不认账的.我们并没有办法使用脚本系统中的typeof方法获取自定义类的类型,比如'类'JSClass定义如下: function JSClass()  {     

  • 基于JavaScript实现类名的添加与移除

    方法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){ hasCl

  • 基于JavaScript实现单选框下拉菜单添加文件效果

    基于JavaScript实现单选框下拉菜单添加文件效果

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"

  • Javascript 检测、添加、移除样式(className)函数代码

    复制代码 代码如下: <script type="text/javascript"> // 说明:添加.移除.检测 className function hasClass(element, className) { var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); return element.className.match(reg); } function addClass(element, className) {

  • 基于JavaScript实现添加到购物车效果附源码下载

    基于JavaScript实现添加到购物车效果附源码下载

    我们有很多种方法实现将商品添加到购物车,通常的做法是点击"添加到购物车"按钮,会跳转到购物车,在购物车里可以点击"结算"按钮进行结算.而今天我给大家介绍一个更友好的解决方案. 查看演示 下载源码 默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作.用户也可以暂时关闭购物车继续购物. HTML结构

  • JavaScript实现动态添加、移除元素或属性的方法分析

    JavaScript实现动态添加、移除元素或属性的方法分析

    本文实例讲述了JavaScript实现动态添加.移除元素或属性的方法.分享给大家供大家参考,具体如下: JavaScript 动态添加.移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点. insertBefore(newnode, existingnode) 在已有子节点之前插入新的子节点. removeChild(node) 删除元素的某个指定的子节点,并以 Node 对象返回被删除的节点,如果节点不存在则返回 null. innerHTML 属性设置

  • 基于JavaScript表单脚本(详解)

    基于JavaScript表单脚本(详解)

    什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav

  • 基于JavaScript如何制作遮罩层对话框

    1.遮罩层其实就是一个覆盖全界面的半透明的DIV,并处理zIndex使他浮于其他元素之上,是用户不能点击下边的元素,或者说点击没有反应. 2.在遮罩层上方在弹出一个层,由于遮罩层挡住了其他所有元素,用户只能点击弹出层,制造出模式窗口的假象. 废话不多说了,直接给大家贴js代码了. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&quo

  • 基于JavaScript Array数组方法(新手必看篇)

    Array类型是ECMAScript中最常用的引用类型.ECMAScript中的数据与其它大多数语言中的数组有着相当大的区别.虽然ECMAScript中的数据与其它语言中的数组一样都是数据的有序列表,但不同的是,ECMAScript数组中的每一项可以保存任何类型的数据,无论是数值.字符串或者是对象.同时,ECMAScript中的数组大小是可以动态调整的,即可以根据数据的添加自动增长以容纳新增的数据.下面总结一下JavaScript中数组常用的操作函数及用法. •创建数组 创建数组主要有构造函数和

  • 基于JavaScript实现下拉列表左右移动代码

    基于JavaScript实现下拉列表左右移动代码

    废话不多说,先给大家展示一下效果图,如果大家感觉不错,请参考实现代码. 效果图如下所示: 代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • 基于JavaScript制作一个骰子游戏

    基于JavaScript制作一个骰子游戏

    目录 知识点 HTML 部分 CSS 部分 JavaScript 部分 总结 游戏可以通过这个链接进入 完整源码我已经放在GitHub上了 这节实验我们将使用 HTML.CSS 和 JavaScript 构建一个骰子游戏.设置两名玩家(一个人玩也行)然后掷骰子,获得更高点数的玩家将赢得游戏. 知识点 :hover 选择器 querySelector() 方法 setAttribute() 方法 骰子 1-6 点的图片都放在这里了,大家可以将这些图片保存在本地的文件夹中然后用相对地址引用,或者也可

随机推荐