<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
        <div id = "test" style = "width:250px;height:100px;">  
            sssssssssssss  
        </div>  
        <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />  
    </body>
</html>
    <style type="text/css">  
        div.testClass{  
            background-color:gray;  
        }  
    </style>  
      
    <script type="text/javascript">  
    function hasClass(obj, cls) {  
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
    }  
      
    function addClass(obj, cls) {  
        if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
    }  
      
    function removeClass(obj, cls) {  
        if (hasClass(obj, cls)) {  
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
            obj.className = obj.className.replace(reg, ' ');  
        }  
    }  
      
    function toggleClass(obj,cls){  
        if(hasClass(obj,cls)){  
            removeClass(obj, cls);  
        }else{  
            addClass(obj, cls);  
        }  
    }  
      
    function toggleClassTest(){  
        var obj = document. getElementById('test');  
        toggleClass(obj,"testClass");  
    }  
    </script>

原声js实现addClass removeClass toggleClass效果的更多相关文章

  1. 原生JS实现addClass,removeClass,toggleClass

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...

  2. jQuery addClass removeClass toggleClass hasClass is(.class)用法

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

  3. jQuery addClass removeClass toggleClass方法概述

    通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...

  4. class 添加样式,删，开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  5. class 添加样式,删除，开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  6. addClass, removeClass, toggleClass（从jquery中抠出来）

    <div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...

  7. .addClass(),.removeClass(),.toggleClass()的区别

    .addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...

  8. Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]

    1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...

  9. 原生js实现addClass,removeClass,hasClass方法

    function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false ...

随机推荐

  1. 恭喜您成为2014年度Microsoft MVP!

  2. Web服务器性能压力测试工具http_load、webbench、ab、Siege使用教程

    Web服务器性能压力测试工具http_load.webbench.ab.Siege使用教程 作者: feng 日期: 2012/07/25 发表评论 (0) 查看评论   一.http_load 程序 ...

  3. Centos5 下redmine的安装及配置

    Redmine: 这是基于ROR框架开发的一套跨平台项目管理系统,是项目管理系统的后起之秀,据说是源于Basecamp的ror版而来,支持多种数据库,除了和 DotProject的功能大致相当外,还有 ...

  4. IntelliJ Idea解决Could not autowire. No beans of 'xxxx' type found的错误提示

    本文转自:http://blog.csdn.net/u012453843/article/details/54906905 1.问题描述 在Idea的spring工程里,经常会遇到Could not ...

  5. Hibernate学习备忘

    1.关于Hibernate异常: org.hibernate.service.jndi.JndiException: Error parsing JNDI name   刚接触Hibernate,调试 ...

  6. RHEL7 -- 修改主机名

    RHEL7中,有三种定义的主机名: a.静态的(static):“静态”主机名也称为内核主机名,是系统在启动时从/etc/hostname自动初始化的主机名 b.瞬态的(transient):“瞬态” ...

  7. 进程间通信机制（管道、信号、共享内存/信号量/消息队列）、线程间通信机制（互斥锁、条件变量、posix匿名信号量）

    注:本分类下文章大多整理自<深入分析linux内核源代码>一书,另有参考其他一些资料如<linux内核完全剖析>.<linux c 编程一站式学习>等,只是为了更好 ...

  8. Linux 批量建立信任关系，实现ssh无password登陆的脚本

    作用: 把当前机器的ssh公钥拷贝到其它机器.以实现从当前机器能够ssh无password登陆到其它机器 用法: 1)把要加入的ip地址写入到一个文件里.比方host 2)把脚本保存为sh文件,如 i ...

  9. firefox os 会不会是未来移动平板及电视之星

    随着2013年第一款firefox os 手机问世以来.Firefox os 系统手机已经经历过几次系统的更新,如今最新版本号的firefox os 为2.0版本号,只是如今的最新版本号还不是非常稳定 ...

  10. ubuntu16安装squid代理服务器

    如果有一台电脑可以上网,想让其他电脑通过代理上网.可以使用这种方法. 1 安装squid sudo apt-get update sudo apt-get install squid 2 修改配置文件 ...