原生js实现类名(class)的增、删
先判断是否有这个类名:
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)的增、删的更多相关文章
- 原生js 操作类名
添加类名: document.getElementById('navBar').getElementsByClassName('mui-tab-item')[0].classList.add('mui ...
- 原生js添加类名,删除类名
1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getEle ...
- 原生JS添加类名 删除类名
为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle&quo ...
- 原生js操作类名
- 原生JS通过类名(className)获取dom元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- javascript 原生js对html元素的 增删改查 操作
'use strict'; class View{ constructor(){ } //创建html元素 addEl(fel, elemName, id, cls){ //创建一个元素 let el ...
- 抛开jQuery,拾起原生JS的DOM操作
常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
随机推荐
- java练习题:现给出二组字符串,比较他们看是否相等
import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import jav ...
- 026-log4j配置文件模板
模板一: ### direct log messages to stdout ### log4j.appender.stdout=org.apache.log4j.ConsoleAppender lo ...
- Django查询一个权限中包含哪些用户
Django查询一个权限中包含哪些用户 Django的Permission对象中没有直接查询相关用户的信息,而都是通过User对象来查询某个用户有哪些权限,例如: user.objects.get(u ...
- 微信小程序-组件篇
一.摘要 组件是小程序整个语法中占比比较大的一部分,没写过组件可以说只懂了半个小程序.组件提供了类似页面的生命周期与逻辑.相比于模板,组件能实现的功能更加全面,也更为强大.通过slot可以自由扩展组件 ...
- CF 675D——Tree Construction——————【二叉搜索树、STL】
D. Tree Construction time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- touch-slide-image
用htmls5+css3实现的在android和ios,以及wekit新版浏览器上实现手指滑动切换图片. https://github.com/navyxie/touch-slide-image
- chmod修改文件的权限/chown修改文件和目录的所有者(转)
ll指令的显示的信息为(当前目录下只有nameservice1一个目录): drwxr-xr-x 3 hdfs hdfs 4096 4月 14 16:19 nameservice1 上述信息分别表示: ...
- 记一次bug修复过程
我的建议,究竟有谁会看,以我的位置,到底能推动到哪一层可行性,可能性 问题:用户的数据丢失了.以为是修改操作 有bug,但查看了后端接口和前端校验,都没有发现问题.但是input数据没有日志[日志级别 ...
- svn 不能校验路径“XXX”的锁;没有匹配的可用锁令牌 故障解决方法
原文出自:https://blog.csdn.net/seesun2012 故障现象: svn Commit ,失败,提示: 不能校验路径"/SEESUN/****系统计划说明书.docx& ...
- python 需求文件requirements.txt的创建及使用
在虚拟环境中使用pip生成: (venv) $ pip freeze >requirements.txt 当需要创建这个虚拟环境的完全副本,可以创建一个新的虚拟环境,并在其上运行以下命令: (v ...