jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery.

在此写了一个利用原生js来实现对dom元素class的操作方法

1.addClass:为指定的dom元素添加样式

2.removeClass:删除指定dom元素的样式

3.toggleClass:如果存在(不存在)，就删除(添加)一个样式

4.hasClass:判断样式是否存在

下面为一toggleClass的测试例子

<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>  

<body>

    <div id = "test" style = "width:250px;height:100px;">

        sssssssssssss

    </div>

    <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />

</body>

　　

原生JS实现addClass,removeClass,toggleClass的更多相关文章

  1. 原声js实现addClass removeClass toggleClass效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

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

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

  4. 浅析原生js模仿addclass和removeclass

    //判断有没有class hasClass(elements, cName) { return !!elements.className.match(new RegExp("(\\s|^)& ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 【实战】Docker 入门实战一：ubuntu 和 centos 安装Docker

    Docker是什么 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布 ...

  2. 2018/09/17《涂抹MySQL》【性能优化及诊断】学习笔记(七)

    读 第十三章<MySQL的性能优化与诊断> 总结 一说性能优化,整个人都像被打了鸡血一样

  3. falsk 与 django 捕获异常

    falsk捕获异常@app.errorhandler(405)def internal_server_error(e): return '这个接口不能被GET请求到,只能post' django 捕获 ...

  4. spring.schemas和spring.handlers对xmlns配置文件作用

    在很多情况下,我们需要为系统提供可配置化支持,简单的做法可以直接基于Spring的标准Bean来配置,但配置较为复杂或者需要更多丰富控制的 时候,会显得非常笨拙.一般的做法会用原生态的方式去解析定义好 ...

  5. 根据Request获取客户端IP

    转自: http://www.cnblogs.com/icerainsoft/p/3584532.html http://www.cnblogs.com/bingya/articles/3134227 ...

  6. pandas基础运算

    重新索引 (1)reindex重新索引,在已有的索引基础上新建索引,fill_value可以指定新建索引默认值 (2)#新建索引,如果新建的索引值为空自动填充之前的值 对于DataFrame重新索引同 ...

  7. 王者荣耀里拿个王者有啥了不起，有胆就来挑战一下ApsaraCache源码

    王者荣耀大家估计都玩的很溜吧,撸完代码开一局,只要不遇到个猪队友,拿个鲁班后羿估计你们都能爆掉对手的塔吧.大神们打个排位赛拿个王者就和吃饭夹菜一样简单... But...你们玩过Redis和Memca ...

  8. Spring MVC中前端控制器拦截问题

    <!-- 前端控制器 --> <servlet> <servlet-name>ssm</servlet-name> <servlet-class& ...

  9. 为什么mysql 5.7.24启停不显示错误信息？log-error_verbosity参数

    关键词:log-error_verbosity ,mysql启停没有信息,mysql启停不显示错误信息,mysql不显示启停信息 原因就是因为 log-error_verbosity = 2 被设置成 ...

  10. dedecms站内搜索页面调用最新文章

    在页面中调用最新文章列表可以使新发布的文章更快被收录,如何在dedecms站内搜索页面调用最新文章呢? 1.登陆系统后台,进入“模板——模板管理——自定义宏标记”,点击“智能标记向导”进入智能标记生成 ...