<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. 获取本机CPU，硬盘等使用情况

    早上的时候接到主管的一个任务,要获取服务器上的cpu,硬盘, 数据库等 的使用情况,并以邮件的方式发给boss, = =没办法,公司的服务器真是不敢恭维,顺便吐槽一下公司的网速,卡的时候30k左右徘徊 ...

  2. 微信分享jssdk config:invalid signature 签名错误

    使用微信分享时,按照官方给的demo,使用时一直提示签名错误. 根据微信开发文档(http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd ...

  3. ecshop安全方面的一些参考建议

    一,ecshop安装,其实很简单,只要一直下一步下一步点击即可,这样总是没有错的,因为官方不可能给我们一个有问题的程序,尽量从简即可. 请注意一下两点 A:在安装ecshop的时候,不要将所有文件都设 ...

  4. unable to find valid certification path to requested target

    Error : javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path bu ...

  5. Nlog从下载到使用例子

    第一.首先下载nlog.dll 下载地址:http://pan.baidu.com/s/1i3DQsV7 第二.添加nlog.ll的引用 第三.代码 private static Logger log ...

  6. TypeError: not enough arguments for format string

    到一个问题,表示100% 的时候,出现这个问题. 因为python语法会认为是你需要转移符,这个时候你可以选择100%% 来表示

  7. cf C. Alice and Bob

    http://codeforces.com/contest/347/problem/C 这道题就是求出n个数的最大公约数,求出n个数的最大值,总共有max1/gcd-n个回合.然后判断如果回合数%2= ...

  8. ftp和http转参数的使用（转）

    浏览器因特网资源:URL是浏览器寻找信息时所需的资源位置,通过URL,应用程序才能找到并使用共享因特网上大量的数据资源. 大部分URL都遵循一种标准的格式: ①HTTP协议(http://或者http ...

  9. linux sed 使用

    sed对文本的处理很强大,并且sed非常小,参数少,容易掌握,他的操作方式根awk有点像.sed按顺序逐行读取文件.然后,它执行为该行指定的所有操作,并在完成请求的修改之后的内容显示出来,也可以存放到 ...

  10. libeXosip2(1-2) -- How-To initiate, modify or terminate calls.

    How-To initiate, modify or terminate calls. The eXtented eXosip stack eXosip2 offers a flexible API ...