原生js实现addclass,removeclass,toggleclasss实例

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,toggleclasss实例全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 原生js实现addClass,removeClass,hasClass方法

    本文分为两部分进行讲解,具体内容如下 第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' '

  • 原生js实现addclass,removeclass,toggleclasss实例

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在),就删除(添加)一个样式 4.hasClass:判断样式是否存在 下面为一toggleClass的测试例子 <style type="text/css&quo

  • 原生JS实现的放大镜效果实例代码

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (

  • 原生javascript实现addClass,removeClass,hasClass函数

    原生的addClass, removeClass, hasClass函数,未使用jquery class.js function hasClass(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } function addClass(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; } functio

  • 原生JS+Canvas实现五子棋游戏实例

    原生JS+Canvas实现五子棋游戏实例

    一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *

  • 基于原生js实现九宫格算法代码实例

    九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols); 列 col=parseInt(i%cols); i是当前的盒子,cols是总列数, 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

  • js实现addClass,removeClass,hasClass的函数代码

    复制代码 代码如下: function hasClass(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } function addClass(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; } function removeClass(ele,cls) { if (hasClass(ele,cls

  • 原生js制作日历控件实例分享

    原生js制作日历控件实例分享

    本文实例为大家分享了js实现一个简单的日历控件,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>date</title> <style type="text/css"> *{ margin:0; padding:0;} a{ text-decoration:none

  • 原生JS可拖动弹窗效果实例代码

    原生JS可拖动弹窗效果实例代码

    这个代码不是我原创的,只是最近想学自己做一个很漂亮的弹窗,自己本来是不会怎么写的,所以上网去找了下,感觉这个不错,很简单,很实用,入门很棒.我就改了下,使逻辑性和可读性更好. 原作者已不可考.感谢原作者,阿门. 复制代码 代码如下: <html>    <head>        <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>       

随机推荐