先判断是否有这个类名:

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. how to run windows programs on a MAC?

    How to run windows programs on a MAC? We could use wine or Wine Bottler which is based on wine and p ...

  2. 浅谈flex布局

    Flex布局,俗称弹性布局,有了这个布局,咱们做的事情很多,以前那些很难实现比如说垂直居中之类都不存在了. 盒模型布局依赖于float,display,定位之类的方式来布局,这种的布局对一些特殊布局来 ...

  3. Mybatis 关联查询(二

    一对多的管理查询结果映射   1.进行一对多的查询时候,要在主查询表对应的Po中加入关联查询表对应PO的类的list集合作为属性. public class Orders { private Inte ...

  4. bootstrap-select在angular上的应用

    1.bootstrap-select 依赖bootstrap.js ,又依赖jQuery,这些都可以用requirejs来处理. 2.一般bootstrap-select 都放在具体的模块上,而是动态 ...

  5. storm之topology的启动

    一个topology的启动包括了三个步骤 1)创建TopologyBuilder,设置输入源,输出源 2)获取config 3)提交topology(这里不考虑LocalCluster本地模式) 以s ...

  6. sqlserver - FOR XML PATH

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  7. JAVA线程池的原理分析

    线程池的作用 1.降低资源的消耗 2.提高效率 3.方便管理 相关概念 corePoolSize核心线程数:核心池的大小,当有任务到达之后,就会创建一个线程去执行任务,当任务数量到达核心线程数后,就会 ...

  8. ActiveMQ整合spring结合项目开发流程(生产者和消费者)总结

    一:生产者代码编写: 1.配置pom.xml引入相关坐标 <dependencies> <!-- spring开发测试 --> <dependency> <g ...

  9. Nginx 504错误总结

    Nginx 504错误(Gateway time-out  网关超时)的含义是所请求的网关没有请求到,简单来说就是没有请求到可以执行的PHP-CGI. 一般看来, 这种情况可能是由于nginx默认的f ...

  10. 1、springboot之HelloWorld

    最基本的,官网copy 创建maven项目 maven中添加 <parent> <groupId>org.springframework.boot</groupId> ...