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|$)'));
}
//添加一个Class
function addClass(element,className){
if(!hasClass(element,className)){
element.className+=' '+className;
}
}
//删除一个Class
function removeClass(element,className){
if(hasClass(element,className)){
element.className=element.className.replace
(new RegExp('(\\s|^)'+className+'(\s|$)'),' ');
}
}
JavaScript中,关于class的调用的更多相关文章
- javascript中onclick事件能调用多个方法吗
Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
- JavaScript中的链式调用
链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等, ...
- (转)javascript中的对象查找
本文转自:http://otakustay.com/object-lookup-in-javascript/ ---很棒的一篇文章,作者的其他文章还暂时没读,但相信作者是一个谦虚 谨慎的好工程师 近 ...
- javascript中的部分函数应用
这篇文章写的很全面,不过也啰嗦:http://benalman.com/news/2012/09/partial-application-in-javascript/ 这篇文章是神级运用:http:/ ...
- javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
- 【转】JavaScript中的this关键字使用的四种调用模式
http://blog.csdn.net/itpinpai/article/details/51004266 this关键字本意:这个.这里的意思.在JavaScript中是指每一个方法或函数都会有一 ...
- Javascript中函数的四种调用方式
一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...
- 使用Ajax在javascript中调用后台C#函数
使用Ajax在javascript中调用后台C#函数 最近一段时间在紧跟一个网站的项目,数据库中用户表的UserName要求是唯一的,所以当用户选定一个用户名进行注册时要首先检查该用户名是否已被占用, ...
- 简谈 JavaScript、Java 中链式方法调用大致实现原理
相信,在 JavaScript .C# 中都见过不少链式方法调用,那么,其中实现该类链式调用原理,大家有没有仔细思考过?其中 JavaScript 类库:jQuery 中就存在大量例子,而在 C# 中 ...
- JavaScript中以构造函数的方式调用函数
转自:http://www.cnblogs.com/Saints/p/6012188.html 构造器函数(Constructor functions)的定义和任何其它函数一样,我们可以使用函数声明. ...
随机推荐
- hdu 1028 & hdu 1398 —— 整数划分(生成函数)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1028 整数划分,每个数可以用无限次: 所以构造 f(x) = (1+x+x2+x3+...)(1+x2+x ...
- poj1275收银员——差分约束
题目:http://poj.org/problem?id=1275 做的第一道差分约束题... 首先,根据题意得出一些不等关系(f为前缀和雇佣人数): 0 <= f[i] - f[i-1] &l ...
- 微信小程序的ajax数据请求wx.request
微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...
- dcos下rexray服务的配置
在dcos环境下,rexray服务的默认配置文件为/opt/mesosphere/etc/rexray.conf,而其服务文件则是 /etc/systemd/system/dcos-rexray.se ...
- js格式
/** * Created by admin on 2017/9/22. */ // 分号后不要再有多余的空格 var name = "North"; var name = &qu ...
- php 有时候难以输出显示的信息可以用ob缓冲区来做
有时候一些难以打印的信息可以通过缓冲区来做,比如手机扫码上的信息看不到这种, 当然也可以通过fiddler来抓包,也可以看到这些信息,直接上代码: <?php ob_start(); //开启缓 ...
- Flutter实战视频-移动电商-21.分类页_类别信息接口调试
21.分类页_类别信息接口调试 先解决一个坑 取消上面的GridVIew的回弹效果.就是在拖这个gridview的时候有一个滚动的效果 physics: NeverScrollableScrollPh ...
- 18.Consent 实现思路介绍
讲一下实现Consent的逻辑 interaction它会根据returnUrl 输入用户名和密码后是在登陆的Controller,登陆完之后呢,会有一个returnUrl returnurl会被带到 ...
- Fitnesse中TemplateLibrary的使用方法
1.新建一个SuitePage,命名为TemplateLibrary 2.然后如下图,添加作为template的TestPage,如下面的Get 3.在Get page中添加template内容,如下 ...
- luogu P3600 随机数生成器【dp】
把期望改成方案数最后除一下,设h[i]为最大值恰好是i的方案数,那么要求的就是Σh[i]*i 首先包含其他区间的区间是没有意义的,用单调栈去掉 然后恰好不好求,就改成h[i]表示最大值最大是i的方案数 ...