测试关于class的调用.aaa{ font-size:20px; color:red; }.bbb{ font-size:50px; color:green;}var test=doc" />
当前位置:首页 > 日记 > 正文

JavaScript中关于class的调用方法

JavaScript中关于class的调用方法

PS:class的调用,其实是可以叠加的,当然了这要求样式不同的情况下,如果样式相同,则后一个样式会覆盖前一个样式。

1、举例如下:

<div id="test" class="aaa bbb">测试关于class的调用</div>
.aaa{ font-size:20px; color:red; }.bbb{ font-size:50px; color:green;}
var test=document.getElementById('test');test.className='aaa';test.className='aaa bbb';//因为aaa和bbb的样式相同,所以,bbb的样式会覆盖aaa的样式

所以最后‘测试关于class的调用'几个字的样式是:font-size:50px; color:green;

2、这样的添加类方式很繁琐,每次添加一个新的,我还要带上之前写的类,容易带漏,并且还要检查是否带全,所以可以编写函数方法来解决添加类和删除类的问题:

function hasClass(element,className){   //判断是否存在类    return element.className.match(new RegExp('(\\s|^)'+className+'(\s|$)')); }//添加一个Classfunction addClass(element,className){  if(!hasClass(element,className)){     element.className+=' '+className;  }  }  //删除一个Classfunction removeClass(element,className){ if(hasClass(element,className)){    element.className=element.className.replace   (new RegExp('(\\s|^)'+className+'(\s|$)'),' '); }}   

以上这篇JavaScript中关于class的调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

ppt2010中smartart工具怎么使用

ppt2010中smartart工具怎么使用

图形,工具,电脑软件,smartart,SmartArt,  在制作PPT演示文稿的过程中,可以充分利用ppt自带的SmartArt图形。来充分表现演讲者的思想。那么SmartArt大家知道是什么吧?下面小编就为你详解ppt中的SmartArt图形怎么使用吧。ppt2010的SmartArt…

js封装成插件的步骤方法

js封装成插件的步骤方法

步骤,封装,插件,方法,电脑软件,由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件。感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了下如何封装.....虽…

Excel表格怎么画任意划线Excel表格

Excel表格怎么画任意划线Excel表格

步骤,实线,方法,教程,表格,  工作中常遇到需要在表格中对某些部分任意标出,达到如用笔在纸质表格上表明一样的效果。利用插入形状,能够实现。下面小编教你Excel表格画任意划线的具体步骤。希望对你有帮助!Excel表格中任意划线的步骤打开需要…

控制Excel工作簿中图表的显示和隐

控制Excel工作簿中图表的显示和隐

显示,图表,控制,方法,工作,  Excel工作表中的图表、图形或占位符可以使用VBA代码来对其显示和隐藏进行控制,在编写代码时,可以通过设置工作簿对象的DisplayDrawingObjects属性来实现这种控制。以下是小编为您带来的关于控制Excel工作簿中图…

excel2010设置数据有效性的两种方

excel2010设置数据有效性的两种方

设置,数据,方法,有效性,两种,  重复出现的数据在excel制作中除了粘贴复制这样的方法,还可以采用数据有效性设置来实现。小编今天介绍两种设置数据有效性的方法,从此之后动动鼠标就可以处理重复出现的内容了。excel2010设置数据有效性的两种…

PPt2010怎么设置显示批注图文教程

PPt2010怎么设置显示批注图文教程

显示,设置,图文教程,方法,电脑软件,  在制作PPT的过程中有时候需要添加备注,那么大家值得ppt2010中添加备注怎么做吗 ?下面小编就为你提供如何在ppt2010中添加备注的方法啦!希望对大家有所帮助。PPt2010添加显示批注的方法打开ppt2010选择…

JS简单判断滚动条的滚动方向实现方

JS简单判断滚动条的滚动方向实现方

方法,滚动条,简单,电脑软件,JS,本文实例讲述了JS简单判断滚动条的滚动方向实现方法。分享给大家供大家参考,具体如下:以下代码实现判断页面的滚动条的滚动方向;var sign = 80;//定义默认的向上滚与向下滚的边界window.onscroll = window.onres…

Excel中2010版每次打开都要进行配

Excel中2010版每次打开都要进行配

配置,处理方法,步骤,都要,电脑软件,  Excel 是微软办公套装软件的一个重要的组成部分,广泛地应用于管理、统计财经、金融等众多领域。今天,小编就教大家在Excel中2010版每次打开都要进行配置的处理方法。Excel中2010版每次打开都要进行配置…

Word日期内容控件的使用方法是什么

Word日期内容控件的使用方法是什么

日期,内容控件,使用方法,电脑软件,Word,  很多时候我们做的文档需要别人来填写日期时间,但是每个人填写的格式都不一样,所以只能做成选择方式的日期,这样就可以统一格式了。以下是小编为您带来的关于Word日期内容控件的使用方法,希望对您有所…

微信朋友圈怎么关闭关闭微信朋友圈

微信朋友圈怎么关闭关闭微信朋友圈

微信朋友圈,步骤,方法,电脑软件,strong,  感觉不需要再使用微信朋友圈这个功能的话,那么怎么关闭微信朋友圈呢?步骤是什么?就让小编来教教大家正确注销微信朋友圈的方法,希望能够帮助到你们。微信朋友圈的关闭方法1、登陆微信后,进入&ldquo;设…

浅谈regExp的test方法取得的值变化

浅谈regExp的test方法取得的值变化

处理方法,方法,浅谈,原因,电脑软件,1、JavaScript 正则表达式对象RegExp的test方法,用于检测一个字符串是否匹配某个模式。字面量定义RegExp对象:var re = /pattern/attributes,其中attributes可以是g,i,m;阅读以下程序:<script type="text/jav…

excel公式不起作用的解决教程excel

excel公式不起作用的解决教程excel

教程,公式,不起作用,电脑软件,excel,  Excel中经常需要使用到公式进行对数据的一个计算,但如果公式不起作用的话具体该如何解决呢?下面是小编带来的关于excel公式不起作用的解决教程,希望阅读过后对你有所启发!excel公式不起作用的解决教程…