<style>
     #div1 {
         width: 100px;
         height: 100px;
         position: absolute;
     }

     .div1 {
         background: red;
     }

     .div2 {
         background: yellow;
     }
 </style>

 <div id="div1" class="div2 div1 div3 div2"></div>

 <script>
     var oDiv1 = document.getElementById("div1");

     oDiv1.onclick = function() {
         switchClass(this, "div2")
     }

     function switchClass(obj, sClass) {
         var oldClass = obj.className;
         var re = new RegExp('\\b' + sClass + '\\b');
         if (re.test(oldClass)) {
             obj.className = obj.className.split(sClass).join("").replace(/\s+$/, "")
         } else {
             obj.className = oldClass + " " + sClass
         }
     }
 </script>

原生js判断是否有某个class,如果有就删掉,没有加上的更多相关文章

  1. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  2. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  3. 原生JS判断密码强弱

    前些天工作中有这个需求,自己手写了相关的JS代码,第一种方法是通过ASCII 码判断密码类型,完成用户注册时判断用户输入密码的强度,分强.弱.中三等级,它可以根据用户输入的密码显示对应的密码强弱等级, ...

  4. 利用原生JS判断组合键

    <script type="text/javascript"> var isAlt = 0; var isEnt = 0; document.onkeydown = f ...

  5. js判断类型为数字的方法实现总汇——原生js判断isNumber()

    方法一[推荐]: 最容易想到的是用typeof来判断是否是number类型 ,但是如果为NaN会被认为也是number类型,因此我们需要使用isNaN来排除NaN的情况. function isNum ...

  6. 原生js判断某个元素是否有指定的class名的几种方法

    [注意]以下方法只对class只有一个值的情况下操作 ************************************************************* 结构部分: <d ...

  7. 原生js判断设备类型

    var u = navigator.userAgent; //Android终端 var isAndroid = u.indexOf('Android') > -1 || u.indexOf(' ...

  8. 函数语法:原生js判断某个元素是否有指定的class名的几种方法

    var aLi = document.querySelectorAll('#tabs li'); for(var i = 0;i <p.length;i++){ //第一种方法,用classLi ...

  9. JS 原生JS 判断滚动条滑动到底部(兼容苹果safari)

    ListenerScoller () { var pageIndex = 1; var startX, startY; document.addEventListener('touchstart',f ...

随机推荐

  1. Java--创建线程及常用方法

    继承java.lang.Thread类--Thread类代表线程类  它的常用方法如下: static Thread currentThread():返回当前正在运行的线程对象的引用. static ...

  2. 【C#】与C及OC的不同点

    事实上熟悉这些语言的朋友们深知,这几个语言全然没有可比性. 因为工作须要,近期须要重温C#语言,难免会受到C和OC的基础知识影响. 此篇是本人的一个学习笔记.仅此献给有C/OC基础,须要继续学习C# ...

  3. 最简单的基于FFMPEG的封装格式转换器(无编解码)

    本文介绍一个基于FFMPEG的封装格式转换器.所谓的封装格式转换,就是在AVI,FLV,MKV,MP4这些格式之间转换(相应.avi,.flv,.mkv,.mp4文件).须要注意的是,本程序并不进行视 ...

  4. HTML5另类塔防游戏 -《三国战线》公布

    关于本作 游戏介绍 本游戏是一款另类塔防游戏.本作以三国这段历史为题材,提供了从颍川之战到官渡之战.官渡之战到夷陵之战.夷陵之战到五丈原之战等15个关卡.在每一个关卡中,你会控制一名三国武将与出现的敌 ...

  5. Android保存设置的PreferenceActivity

    界面XML文件:preference_setting.xml <?xml version="1.0" encoding="UTF-8"?> < ...

  6. 比較具体的handle机制

    Android的消息机制,用Android线程间通信的Message机制,Android中Handler的用法--在子线程中更新界面,handler机制 Android的消息机制(一) android ...

  7. MYSQL参数学习---------------- 张碧池

    http://pottievil.com/category/mysql/mysql%E5%8F%82%E6%95%B0/

  8. hdu2074java

    叠筐 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  9. [Eclipse]The type XXX cannot be resolved. It is indirectly referenced from required .class files

    在Eclipse中遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误 ...

  10. 我的 ubuntu 12.04.2修复Grub

    网上有很多…… 首先我做了U盘启动,然后进入LiveCD模式. 输入grub,提示说要重新安装,好了,那就安装吧,连好网,sudo apt-get install grub 安装成功后,sudo -i ...