<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. 1、shell 简介

    Shell 本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥 梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地 ...

  2. 练习—单链表—Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1->2-& ...

  3. NAS4Free 安装配置（一）开箱图

    拆箱记录 东西不错,做工很好 包装箱 背面 正面(未装前面板) 底部 前面板打开后 打开上盖 开机正面图

  4. form 表单练习

    创建战网通行证账号,开启您的冒险之旅.<form>    <table border="0">        <tr>            & ...

  5. C语言复习--实现栈

    C #include <stdio.h> #include <stdlib.h> #define STACK_SIZE 100 typedef char TYPE; typed ...

  6. 使用StreamReader与StreamWriter进行文本文件读写

    namespace filetest { class FileUtil { public static void WriteFile(string file) { using (FileStream ...

  7. 分布式文件系统glusterfs安装步骤

    我的系统是 RHEL5 , 可能环境不一样, 需要安装的第三方依赖不一样啊, 反正大家在安装的过程中缺少什么就去安装什么, 一般都会有提示的. 下载   glusterfs-3.2.0.tar.gz  ...

  8. 《Programming WPF》翻译 第9章 3.自定义功能

    原文:<Programming WPF>翻译 第9章 3.自定义功能 一旦你挑选好一个基类,你将要为你的控件设计一个API.大部分WPF元素提供属性暴露了多数功能,事件,命令,因为他们从框 ...

  9. spring框架源码编译

    程序猿小菜一枚,最近从github上面下载下来一份spring各个项目的源码一份,但是弄了很长时间,因为网速和(fanqiang)的速度,希望大家不要再为这种无谓的时间花费时间,简单来说github上 ...

  10. ofbiz安装优化

    一. 1.安装jdk 2.安装数据库 3.安装ant yum install ant 4.编译启动ofbiz cd /ofbiz目录下 ant run-install ./startofbiz.sh ...