先判断是否有这个类名:

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. MySQL表级约束和列级约束

    对一个数据列建立的约束,称为列级约束 对多个数据列建立的约束,称为表级约束 列级约束即可以在列定义时生命,也可以在列定义后声明. 表级约束只能在列定义后声明. NOT NULL和DEFAULT只存在列 ...

  2. Mongodb定时备份脚本和清除脚本

    Mongodb用的是可以热备份的mongodump和对应恢复的mongorestore,在linux下面使用shell脚本写的定时备份,代码如下 1.定时备份 #!/bin/bash sourcepa ...

  3. maven打包报错 ERROR: No goals have been specified for this build. You must specify a valid lifecycle phase or a goal in the format <plugin-prefix>:<goal> or <plugin-group-id>:<plugin-artifact-id

    打开pom.xml 在build标签中 增加 <defaultGoal>compile</defaultGoal> 如下: <build><defaultGo ...

  4. 【ES6】var、let、const三者的区别

    首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM ...

  5. preg_match()——php

    第一,让我们看看两个特别的字符:‘^’和‘$’他们是分别用来匹配字符串的开始和结束,以下分别举例说明: "^The": 匹配以 "The"开头的字符串; &qu ...

  6. linux压缩和解压缩命令大全[转]

    .tar 解包:tar zxvf FileName.tar 打包:tar czvf FileName.tar DirName ------------------------------------- ...

  7. spring-boot之简单定时任务

    首先是pom.xml依赖: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:/ ...

  8. 十二 Cent OS下 tomcat启动项目响应速度很慢

    在tomcat部署了web项目,每次启动项目都需要花费2-3分钟,甚至有的时候需要花费10分钟左右,实在是太慢了. 在网上查找解决方案,把 jdk/jre/lib/security/java.secu ...

  9. Python基础学习总结(二)

    2.列表简介 Python有内置的一种数据类型列表:list. list是一种有序的集合. 列表由一系列按特定顺序排列的元素组合.用方括号 [ ] 来表示. list里面的元素的数据类型可以不同,比如 ...

  10. 【原创】MapReduce程序如何在集群上执行

    首先了解下资源调度管理框架Yarn. Yarn的结构(如图): Resource Manager (rm)负责调度管理整个集群上的资源,而每一个计算节点上都会有一个Node Manager(nm)来负 ...