先判断是否有这个类名:

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. Oracle Net Configuration(监听程序和网络服务配置)

    1.在Oracle服务端和客户端都安装完之后,就需要配置监听程序和本地网络服务,以便外部程序和工具的访问,所以Oracle提供了两款自带的工具来配置它们分别是 Net Configuration.Ne ...

  2. Oracle TM锁和TX锁

    CREATE TABLE "TEST6" ( "ID" ), "NAME" ), "AGE" ,), "SEX ...

  3. 关于ie8兼容性问题的处理

    1.replace将单引号变成双引号 var page=user.customConfig.replace(/\‘|’/ig,"\""); 兼容谷歌和ie var pag ...

  4. pow() 函数

    pow() 函数用来求 x 的 y 次幂(次方),其原型为: double pow(double x, double y); #include<iostream> #include< ...

  5. [java源码解析]对HashMap源码的分析(二)

    上文我们讲了HashMap那骚骚的逻辑结构,这一篇我们来吹吹它的实现思想,也就是算法层面.有兴趣看下或者回顾上一篇HashMap逻辑层面的,可以看下HashMap源码解析(一).使用了哈希表得“拉链法 ...

  6. 前端渲染模板(一):Thymeleaf

    一.使用 本篇文章将以SpringBoot为框架来介绍Thymeleaf的用法. 1 资源文件的约定目录结构  Maven的资源文件目录:/src/java/resources spring-boot ...

  7. SSIS教程:创建简单的ETL包 -- 2. 添加循环(Adding Looping)

    在第 1 课:创建项目和基本包中,创建了从单个平面文件源中提取数据的包,然后使用查找转换功能对数据进行了转换,最后将数据加载到AdventureWorksDW2012 示例数据库的 FactCurre ...

  8. hexo+github搭建博客跳坑

    hexo+GitHub搭建博客过程中,hexo安装成功,可以启动和运行,但是访问localhost:4000却无法访问,弄了半天,最后发现是福昕阅读器占用了4000端口 解决办法: 采用命令hexo ...

  9. 阿里云配置HTTPS

    阿里云配置HTTPS 2018-05-29 16:00:56 by SemiconductorKING 最近申请域名配置了一下HTTPS协议,记录一下配置过程. 准备 备案过的域名,一个SSL证书(免 ...

  10. 兼容ie6的ul水平居中对齐

    ---恢复内容开始--- margin可以为负数左移动. padding不可以. ---恢复内容结束---