javaScript给元素添加多个class
<html>
<head>
<style type="text/css">
.div2{
font-size:16px;
color:orange;
}
.div3{
font-size:20px;
color:blue;
}
<style>
<script type="text/javascript">
[1]直接把样式赋值给className
var odiv=document.getElementById('div1');
odiv.className= div3
//这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉;
[2]使用累加赋值给className
var odiv=document.getElementById('div1');
odiv.className+=" "+div3 //样式和样式之间需要空隙 ，所以加个空字符串隔开
//这样可以得到 class="div2 div3" 可以正常增加，但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式，如果有我们添加的话就会变成累赘 比如class="div2 div3 div3";
[3]检测样式原先之前是否有相同的样式
var odiv=document.getElementById('div1');
function hasClass(element,csName){
element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
}
[4]在[3]的基础上我们就可以进行判断性给元素添加样式了
var odiv=document.getElementById('div1');
function hasClass(element,csName){
return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
}
function addClass(element,csName){
if(!hasClass(element,csName)){
element.className+=' '+csName;
}
addClass(odiv,'div3');
//这样就可以灵活给元素添加样式了;
【元素删除指定样式】
//同样先进行判断，在进行删除
var odiv=document.getElementById('div1');
function hasClass(element,csName){
return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
}
function deleteClass(element,csName){
if(!hasClass(element,csName)){
element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' '); //利用正则捕获到要删除的样式的名称，然后把他替换成一个空白字符串，就相当于删除了
}
deleteClass(odiv,div3);
}
</script>
</head>
<body>
<div id="div1" class='div2'> 测试</div>
</body>
</html>
javaScript给元素添加多个class的更多相关文章
- Javascript为元素添加事件处理函数
document.getElementById("test").onclick = function(){ ... };
- Canvas 内部元素添加事件处理
目录 前言 自定义事件 有序数组 元素父类 事件判断 其他 立即执行函数 apply, call, bind addEventListener 传参 调用父类的构造函数 对象检测 isPointInP ...
- 【HTML5】Canvas 内部元素添加事件处理
前言 canvas 没有提供为其内部元素添加事件监听的方法,因此如果要使 canvas 内的元素能够响应事件,需要自己动手实现.实现方法也很简单,首先获得鼠标在 canvas 上的坐标,计算当前坐标在 ...
- JQuery_给元素添加或删除类等以及CSS()方法
一.addClass() - 向被选元素添加一个或多个类 <script src="jquery-1.11.1.min.js"></script> < ...
- 详细解析 JavaScript 获取元素的坐标
引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...
- 给HTML页面指定元素添加属性，添加父元素
给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img 此处用到querySelectorA ...
- JavaScript实现元素拖动性能优化
前言:前几天没事干写了个小网站,打算用原生的javascript实现元素的拖动,但是事情并没有想象的那么顺利,首先是实现了拖动的元素卡的不能再卡,简直不能够,上图~~ 看见没?这就是效果,简直让人欲哭 ...
- js中怎么为同级元素添加点击事件
事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...
- select元素添加option的add()方法 | try{}catch{}
1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...
随机推荐
- JSON转Model内部实现解析
一.思路: 1.通过模型类型获得所有的属性和其类型 2.对获得的json进行处理.类型处理 3.考虑字典键值和模型属性名不一致的情况 4.添加code用于归档 5.补充JSON转字典.字典转JSON. ...
- JDBC中PreparedStatement和Statement的区别
共同点: PreparedStatement和Statement都是用来执行SQL查询语句的API之一. 不同点: 在PreparedStatement中,当我们经常需要反复执行一条结构相似的sql语 ...
- struts.custom.i18n.resources国际化详解（一）
每种框价都会有国际化的支持,struts2的国际化大致上分为页面的国际化,Action的国际化以及xml的国际化 首先在struts.properties文件中加入以下内容:struts.custom ...
- 感知机（perceptron）
二类分类的线性分类模型,属于判别模型,利用梯度下降法对损失函数进行极小化求得感知机模型分为原始形式和对偶形式,是神经网络和支持向量机的基础 由输入控件到输出控件的如下函数: f(x)=sign(W.X ...
- XJOI网上同步训练DAY2 T2
[问题描述] 火车司机出秦川跳蚤国王下江南共价大爷游长沙.每个周末勤劳的共价大爷都会开车游历长沙市. 长沙市的交通线路可以抽象成为一个
- Windows 8.1 with Update 镜像下载（增OEM单语言版）
该系统已有更新的版本,请转至<Windows 8.1 with update 官方最新镜像汇总>下载. 2014年4月9日凌晨,微软向MSDN订阅用户开放了Windows 8.1 with ...
- C51变量的存储
一.全局变量和局部变量 全局变量和局部变量的区别在于作用域的不同.此外还有静态全局变量和静态局部变量. 全局变量作用域为全局,在一个源文件中定义,其他的源文件也可以应用.在其他的源文件中使用exter ...
- TXMLDocument换行的两种方案
手写代码: XML格式化使用msxml引擎,Delphi代码如下: Delphi/Pascal code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- bootargs中的环境变量说明和一些常用的uboot命令
bootargs中的环境变量说明和一些常用的uboot命令 一些常见的uboot命令:Help [command]在屏幕上打印命令的说明Boom [addr]启动在内存储器的内核Tftpboot通过t ...
- voijs1883 月光的魔法
背景 影几欺哄了众生了天以外——月儿何曾圆缺 描述 有些东西就如同月光的魔法一般. Luke是爱着vijos的.他想为自己心爱的东西画些什么. 就画N个圆吧.把它们的圆心都固定在x轴上. 圆与圆.为了 ...