<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. CODEVS 1066/洛谷 P1514引水入城

    1066 引水入城 2010年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description 在一个遥远的国 ...

  2. Opensuse13.2开启ssh

    要开启ssh很简单,步骤分为三步 步骤1: 安装ssh zypper install ssh 步骤2:启动ssh daemon网上很多通过 service 命令或者 init.d 目录中的脚本启动ss ...

  3. 我的django之旅（二）模板和静态文件

    我的django之旅(二)模板和静态文件 标签(空格分隔): django 1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个 ...

  4. Google机器学习笔记（七）TF.Learn 手写文字识别

    转载请注明作者:梦里风林 Google Machine Learning Recipes 7 官方中文博客 - 视频地址 Github工程地址 https://github.com/ahangchen ...

  5. block（四）揭开神秘面纱（下）

    看此篇时,请大家同时打开两个网址(或者下载它们到本地然后打开): http://llvm.org/svn/llvm-project/compiler-rt/trunk/lib/BlocksRuntim ...

  6. Keil C51必须注意的一些有趣特性

    Keil c51号称作为51系列单片机最好的开发环境,大家一定都很熟悉.它的一些普通的特性大家也都了解,(书上也都说有)如:因为51内的RAM很小,C51的函数并不通过堆栈传递参数(重入函数除外),局 ...

  7. MySQL流程控制函数

    官方文档:Control Flow Functions Name Description CASE Case operator IF() If/else construct IFNULL() Null ...

  8. UVa10815.Andy's First Dictionary

    题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. JavaScript - 基于原型的面向对象

    JavaScript - 基于原型的面向对象 1. 引言 JavaScript 是一种基于原型的面向对象语言,而不是基于类的!!! 基于类的面向对象语言,比如 Java,是构建在两个不同实体的概念之上 ...

  10. 《Java程序员面试笔试宝典》终于在万众期待中出版啦~

    <Java程序员面试笔试宝典>终于在万众期待中出版啦~它是知名畅销书<程序员面试笔试宝典>的姊妹篇,而定价只要48元哦,恰逢求职季节,希望本书的出版能够让更多的求职者能够走进理 ...