先判断是否有这个类名:

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

或者:

利用this.getAttribute('class').indexOf('selected') > -1来判断;

增加类名:
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)的增、删的更多相关文章

  1. 原生js 操作类名

    添加类名: document.getElementById('navBar').getElementsByClassName('mui-tab-item')[0].classList.add('mui ...

  2. 原生js添加类名,删除类名

    1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getEle ...

  3. 原生JS添加类名 删除类名

    为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle&quo ...

  4. 原生js操作类名

  5. 原生JS通过类名(className)获取dom元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. javascript 原生js对html元素的 增删改查 操作

    'use strict'; class View{ constructor(){ } //创建html元素 addEl(fel, elemName, id, cls){ //创建一个元素 let el ...

  7. 抛开jQuery,拾起原生JS的DOM操作

    常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...

  8. 常用原生JS方法总结(兼容性写法)

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  9. 原生js实现autocomplete插件

    在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...

随机推荐

  1. 配置文件详解和核心api讲解

    一.配置文件详解 1.映射文件详解 1.映射配置文件的位置和名称没有限制. -建议:位置:和实体类放在统一目录下.  名称:实体类名称.hbm.xml.    2.在映射配置文件中,标签内的name属 ...

  2. [转]OData/WebApi

    本文转自:https://github.com/OData/WebApi/tree/vNext OData Web API Introduction OData Web API (i.e., ASP. ...

  3. jquery 文本框回车与change事件

    文本框的改变用change事件 要用bind,两个是有区别的,change只是在失去焦点的时候出发,很多时候不能满足需要.  代码如下   $('#flowfromid').bind("pr ...

  4. 使用sqlcmd进行MS-dos方式查询

    在windows选择‘运行’vista需要以管理员身份运行,打开命令提示符窗口 要连接到sql server服务器,必须指定服务器名称,安装命名实例中的,还必须指定实例名.默认情况下,sqlcmd使用 ...

  5. Lucene学习之四:Lucene的索引文件格式(3)

    本文转载自:http://www.cnblogs.com/forfuture1978/archive/2010/02/02/1661436.html ,略有删改和备注. 四.具体格式 4.2. 反向信 ...

  6. IE11 F12 开发人员工具 查看 Cookie

    参考网址:Using the F12 developer tools in IE11 Step1 : IE11 => F12 打开 开发人员工具 Step2:开发人员工具 => 网络F5 ...

  7. CSS实现响应式布局(自动拆分几列)

    1.css代码 <style type="text/css"> .container{ margin-top: 10px; } .outerDiv{ float:lef ...

  8. NOIP2017:列队

    Sol 考场上: 这不是送\(50\)吗,\(Q^2\)递推就好了 然后,怎么又送\(20\)分??? \(woc\),只有半个小时了,顺利没调出来只有\(50\)分 考后: 神\(TM\)一个大于号 ...

  9. MDM-Object.fn 一些实践与理解

    Object.assign() 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象.如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖.后来的源的属性将类似地覆盖早先的 ...

  10. Python基础-socket编程

    一.网络编程 自从互联网诞生以来,现在基本上所有的程序都是网络程序,很少有单机版的程序了. 计算机网络就是把各个计算机连接到一起,让网络中的计算机可以互相通信.网络编程就是如何在程序中实现两台计算机的 ...