<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的更多相关文章

  1. Javascript为元素添加事件处理函数

    document.getElementById("test").onclick = function(){ ... };

  2. Canvas 内部元素添加事件处理

    目录 前言 自定义事件 有序数组 元素父类 事件判断 其他 立即执行函数 apply, call, bind addEventListener 传参 调用父类的构造函数 对象检测 isPointInP ...

  3. 【HTML5】Canvas 内部元素添加事件处理

    前言 canvas 没有提供为其内部元素添加事件监听的方法,因此如果要使 canvas 内的元素能够响应事件,需要自己动手实现.实现方法也很简单,首先获得鼠标在 canvas 上的坐标,计算当前坐标在 ...

  4. JQuery_给元素添加或删除类等以及CSS()方法

    一.addClass() - 向被选元素添加一个或多个类 <script src="jquery-1.11.1.min.js"></script> < ...

  5. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  6. 给HTML页面指定元素添加属性，添加父元素

    给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img   此处用到querySelectorA ...

  7. JavaScript实现元素拖动性能优化

    前言:前几天没事干写了个小网站,打算用原生的javascript实现元素的拖动,但是事情并没有想象的那么顺利,首先是实现了拖动的元素卡的不能再卡,简直不能够,上图~~ 看见没?这就是效果,简直让人欲哭 ...

  8. js中怎么为同级元素添加点击事件

    事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...

  9. select元素添加option的add()方法 | try{}catch{}

    1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...

随机推荐

  1. struts2 result的type属性

    目前只使用过以下3种,都是直接跳转到另一个action  chain: 写法:<result name="success" type="chain"> ...

  2. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  3. Javascript个人理解

    一. 生成对象的原始模式 假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性. var Cat = { name : '', color : '' } 现 ...

  4. 使用ARM和VMSS创建自动扩展的web集群

    在很多的商业场景中,用户的访问,峰值时间都是很难预测的,尤其是做一些市场推广活动和促销的时候,到底部署什么规模的web集群合适,这一直是个问题,部署过量会造成高成本和资源不必要的浪费,部署过少,如果到 ...

  5. IOS 项目问题总结

    把自己项目中遇到的问题总结一下,供大家参考,希望大家多多提出意见!! 在Xcode 6.2中遇到Your build settings specify a provisioning profile w ...

  6. 在Mac上使用vundle自动安装vim插件，并用vim代替sourceinsight

    一直以来在Mac上找不到好的代码阅读工具,最近根据网上的教程,自己总结一下,做了个在Mac的类sourceinsight的vim,感觉很好用.我不喜欢那种把vim搞的很复杂的配置,所以做了个仅仅能满足 ...

  7. poj2975--Nim

    题意:对于一个给定的取石子游戏,有多少种先手策略获胜? Ans:若无法获胜,则输出0. 若能获胜我们只要找到一堆石子,使得我们能取它的一部分让总和的异或和变为0.我们先将整个游戏的值异或起来为s 则a ...

  8. OpenSSl 加密解密 示例（终于有编程实践了）

    OPenSSl的加密主要有三个重要的函数.看懂下面的代码就基本上知道该如何使用openssL来加密了. 不过注意,要先将libssl.so.1.0和libcrypto.so.1.0文件复制到执行的文件 ...

  9. HashMap非线程安全分析

    通过各方资料了解,HashMap不是线程安全的,但是为什么不是线程安全的,在什么情况下会出现问题呢? 1. 下面对HashMap做一个实验,两个线程,并发写入不同的值,key和value相同,最后再看 ...

  10. Mysql update 错误

    今天在工作的时候发现自己update 一个表的某个字段超时,想了好久,首先想到的办法是,延长操作时间: mysql> set innodb_lock_wait_timeout=100 mysql ...