原生js实现class的添加和删除简单代码_javascript技巧

实例代码:

function hasClass( elements,cName ){
  return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
};
function addClass( elements,cName ){
  if( !hasClass( elements,cName ) ){
    elements.className += " " + cName;
  };
};
function removeClass( elements,cName ){
  if( hasClass( elements,cName ) ){
    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
  };
};

以上这篇原生js实现class的添加和删除简单代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js添加删除class
原生javascript、javascript 原生ajax、javascript原生代码、原生javascript插件、原生javascript做动画,以便于您获取更多的相关知识。

时间: 2024-10-31 13:13:41

原生js实现class的添加和删除简单代码_javascript技巧的相关文章

JS动态给对象添加事件的简单方法_javascript技巧

WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

原生js实现数字字母混合验证码的简单实例_javascript技巧

本文实例讲述了原生js实现数字字母混合验证码的全部代码,重点是注释很详细,便于大家理解,特分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body, div { margin:

使用原生js实现页面蒙灰(mask)效果示例代码_javascript技巧

对于web应用开发者,当用户进行界面浏览时如果后台程序处理程序时间较长,那么用户在网页的等待时间会较长,但是如果页面上没有一个比较友好的提示方式 (增加蒙灰效果),那么用户体验会不是特别良好,用户不知道现在是不是应该点击别的程序,用户并不知道是不是应该继续等待网页,还是可以点击别的页面. 现在就有一个比较良好的交互,就是增加蒙灰效果.像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果,当然jquery也提供了这种蒙灰方法.在此作者希望自己也能够 使用原生的js实现自己的蒙灰

JS防止用户多次提交的简单代码_javascript技巧

复制代码 代码如下: <html><body> <form action="login.action" method="post">  <input type="button" name="btn" value="提交表单" onclick="return sub();" /> </form></body></

原生JS和JQuery动态添加、删除表格行的方法

  本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4

原生JS和JQuery动态添加、删除表格行的方法_javascript技巧

本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

js实现class样式的修改、添加及删除的方法_javascript技巧

本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

原生Js页面滚动延迟加载图片实现原理及过程_javascript技巧

原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

原生js和jquery分别实现横向导航菜单效果_javascript技巧

本文实例为大家分享了原生js和jquery横向导航菜单的制作方法,供大家参考,具体内容如下 原生javascript实现: 这一次要实现的是鼠标放上去以后,菜单栏被选中的那一栏水平拉伸,鼠标离开后水平收缩.并带有一定的时间性,使肉眼能够看出其拉伸收缩的动画效果. 开始用javascript进行编写: 首先在之前水平方向的导航栏上进行操作,将第一栏和选中栏的样式只改变为背景变黑色,文字变白色 .on,a:hover{background:#000000;color:#FFFFFF;}  之后开始写