原生js实现查找/添加/删除/指定元素的class


Posted in Javascript onApril 12, 2013
window.onload = function(){ 
var gaga = document.getElementById( "gaga" ); 
addClass( gaga,"gaga1" ) 
addClass( gaga,"gaxx" ); 
removeClass( gaga,"gaga1" ) 
removeClass( gaga,"gaga" ) 
function hasClass( elements,cName ){ 
return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 (\\s | $ )判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断 
}; 
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|$)" )," " ); // replace方法是替换 
}; 
}; 
};
Javascript 相关文章推荐
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 #Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 #Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 #Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 #Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 #Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 #Javascript
关于JavaScript中string 的replace
Apr 12 #Javascript
You might like
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
stripos函数知识点实例分享
2019/02/11 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
JS实现放烟花效果
2020/03/10 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python 日志增量抓取实现方法
2018/04/28 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Python while true实现爬虫定时任务
2020/06/08 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
大学活动邀请函
2014/01/28 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
教师职位说明书
2014/07/29 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
交通事故被告代理词
2015/05/23 职场文书
食品安全主题班会
2015/08/13 职场文书