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)的定义和任何其它函数一样,我们可以使用函数声明. ...
随机推荐
- Git 常用命令学习
本文转载自:https://buptldy.github.io/2016/03/02/2016-03-02-Git%20Cheat%20Sheet/ 文章 创建版本库 初始化一个Git仓库,使用git ...
- ftp连接服务器失败||或者Xshell链接错误:Could notconnect to '192.168.18.128' (port 22): Connection failed
有时候刚装完虚拟机发现xshell连接失败,或者使用ftp连接失败.(博主用的是unbuntu,其他linux系统可能在命令上稍有差别,但方法是一样的. xshell连接失败: ftp连接失败: 首先 ...
- HDU2896(AC自动机入门题)
病毒侵袭 Time Limit:1000MS Memory Limit:32768KB Description 当太阳的光辉逐渐被月亮遮蔽,世界失去了光明,大地迎来最黑暗的时刻....在这 ...
- 20.java的7种控制语句
1.java控制语句可以划分为七种 1)控制选择结构语句: if ,if else switch 2)控制循环结构语句: for ,while,do while 3)改变控制语句的顺序 break, ...
- EntityFrameWork Parameter '@columnType' must be defined.
环境: EntityFrameWork CodeFirst+MySql 今天在提交一个外键字段的修改时报“Parameter '@columnType' must be defined.” goog ...
- const_cast标准转换运算符
#include <iostream> using namespace std; class A { public: A() { a=; } public: int a; }; void ...
- Google浏览器如何加载本地文件
Chrome浏览器加载本地文件 一般来说,为了安全起见,浏览器是不能通过load方法来加载本地文件的,load方法只能加载远程服务器上的文件. 在浏览器默认的情况下,试图加载一个本地文件,会出现交叉域 ...
- IntelliJ IDEA 激活
方法1 进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.php 或者 http://idea.la ...
- POJ3268【最短路】
题意: n个点m条有向边,每个点有一头牛,每头牛会沿着各自的最短路先到x点,然后又从x点到各自的点,求这些牛中间最短路程最大的牛. 思路: 从x点到各点的最短路不用说了,裸的最短路: 但是从所有点到x ...
- String.Format 大全
0.0的格式化 string.Format("{0:8D8}", 3)//第一个8表示空8个位置,后一个8表示用0填写最多8位数据 1.格式化货币(跟系统的环境有关,中文系统默认格 ...