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. CAAnimationDelegate 代理方法没调用

    CAAnimationDelegate 代理方法没调用 应该在 addAnimation调用之前设置代理

  2. 树和二叉树->存储结构

    文字描述 1 二叉树的顺序存储 用一组地址连续的存储单元自上而下,自左至右存储完全二叉树上的结点元素. 这种顺序存储只适用于完全二叉树.因为,在最坏情况下,一个深度为k且只有k个结点的单支树却需要长度 ...

  3. 如何在Win10上永久禁用Windows Defender Antivirus

    1.使用Windows键+ R键盘快捷键打开运行命令. 2.键入regedit,然后单击确定以打开注册表. 3.浏览以下路径: HKEY_LOCAL_MACHINE/SOFTWARE/Policies ...

  4. python numpy初始化一个图像矩阵

    mask_all = np.zeros((256, 256), dtype='uint8')  单通道 mask_all_enlarge = np.zeros((256, 256, 3), dtype ...

  5. python练习题-day7

    1.判断一个数是否是水仙花数, 水仙花数是一个三位数, 三位数的每一位的三次方的和还等于这个数. 那这个数就是一个水仙花数, 例如: 153 = 1**3 + 5**3 + 3**3  while T ...

  6. 让网站不去请求favicon.ico图标

    让网站不去请求favicon.ico图标 favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果网站根目录也没有这图标会产生 404.出于优 ...

  7. 解决因为Telnet没有启动导致FTP无法连接的问题

    今天ytkah在其他电脑上想用ftp传点东西发现居然连接不上,查看了一下服务器安全组规则里的端口,也没有相关屏蔽.问了一下运维,他说可能是Telnet没有开启.就试着去看看有没问题.打开 控制面板 - ...

  8. HTN规划 jshop2

    http://www.cs.umd.edu/projects/shop/description.html 在HTN规划,规划体系从世界的初始状态和创建一个计划来执行一系列任务的目的(需要做的事情,抽象 ...

  9. 20170927 Webservice发布指定账户进行访问

    1. 搭建IIS 平台 于服务器A1 2.发布Webservice 到A1 我的问题在于(Webservice中方法中内容会对B1服务器的共享路径进行写入文件动作), 如何来控制网页使用特定的账户去访 ...

  10. ABS PBT POM材质键冒

    键盘手感除了和按键架构相关之外,按键键帽材质及其字迹印技术也会影响键盘手感,从中可看到键帽的重要性不言而喻.像Cherry原厂机械键盘,键帽不管是用料还是字迹印刷技术都让人满意,受到很多玩家追捧.而普 ...