原生js实现查找/添加/删除/指定元素的class
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方法是替换
};
};
};
相关推荐
-
js实现addClass,removeClass,hasClass的函数代码
复制代码 代码如下: function hasClass(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } function addClass(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; } function removeClass(ele,cls) { if (hasClass(ele,cls
-
JavaScript更改class和id的方法
是className,可不是class 注意JavaScript使用的是className去访问class属性,因为class是一个保留关键字,因为将来JavaScript可能开始支持像Java一样的类. 我们在讨论style属性时遇到了棘手的细节问题和浏览器差异性带来的麻烦,正如同经历一场惊涛骇浪.而class和id的更改则像是沙漠里一片平静的绿洲,浏览器们在这里和谐相处.思考这个例子: p { color: #000000; /* black */ } p.emphasis { color:
-
js获取某元素的class里面的css属性值代码
用js如何获取div中css的 margin.padding.height.border等.你可能说可以直接用document.getElementById("id").style.margin获取.但是你说的只能获取直接在标签中写的style的属性,无法获取标签style外的属性(如css文件中的属性).而下面方法则两者值都可以获取.实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点.getStyle(obj,at
-
JavaScript ES6中CLASS的使用详解
前言 对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重要的原因.js里面有许多语法的缺点:繁琐杂乱的.prototype 引用.试图调用原型链上层同名函数时的显式伪多态以及不可靠.不美观而且容易被误解成"构造函数"的.constructor. 除此之外,类设计其实还存在更进一步的问题.传统面向类的语言中父类和子类.子类和实例之间其实是复
-
js获取class的所有元素
复制代码 代码如下: <html><head><script type="text/javascript"> window.onload = function(){ var topMenus = getClass('li','topMenu'); for(var i=0;i < topMenus.length; i++) { alert(topMenus[i].innerHTML); } }
-
用原生JS获取CLASS对象(很简单实用)
听说是最常用....我是看了dom编程艺术想到的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta
-
js中设置元素class的三种方法小结
一.el.setAttribute('class','abc'); 复制代码 代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>setAttribute('class', 'abc')</title> <style type="text/css"> .abc { background: red; }
-
javascript getElementsByClassName函数
今天在网上看到的一个根据ClassName获取Elements的脚本,在此记录一下,以便日后使用. 复制代码 代码如下: var getElementsByClassName = function(searchClass, node, tag) { if (document.getElementsByClassName) { return document.getElementsByClassName(searchClass) } else { node = node || document;
-
js判断样式className同时增加class或删除class
复制代码 代码如下: function MyClass () {} MyClass.hasClassName = function(element, className) { if (!element) return; var elementClassName = element.className; if (elementClassName.length == 0) return false; //用正则表达式判断多个class之间是否存在真正的class(前后空格的处理) if (eleme
-
JavaScript ES6的新特性使用新方法定义Class
ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. ES6中定义类的方式, 就是ES3和ES5中定义类的语法糖,虽然也有些区别,但是整体定义类的方式更加简洁,类的继承更加方便, 如果想对ES6中的继承更加
随机推荐
- iOS和Android用同一个二维码实现跳转下载链接的方法
- Ajax发送和接收请求
- JS实现前端缓存的方法
- 不错的一篇学习CGI脚本(脚本)
- [Oracle] 如何使用触发器实现IP限制用户登录
- php使用socket post数据到其它web服务器的方法
- php中get_magic_quotes_gpc()函数说明
- JS的Document属性和方法小结
- PHP提取中文首字母
- react开发中如何使用require.ensure加载es6风格的组件
- Javascript获取随机数的实现方法
- 详解Ruby on Rails中的mailer相关使用
- Python中的列表生成式与生成器学习教程
- 收藏的精美的Flash 透明背景 提供下载
- 解析thinkphp中的导入文件标签
- 深入剖析浏览器退出之后php还会继续执行么
- Android中ActionBar以及menu的代码设置样式
- Android中使用OkHttp包处理HTTP的get和post请求的方法
- 浅谈stringstream 的.str()正确用法和清空操作
- Win10下免安装版MySQL5.7的安装和配置教程详解