您的位置：首页 > Web前端 > JavaScript

js原生扩展addClass,removeClass,hasClass

2016-12-19 16:31 465 查看

参考了jquery对应的方法

首先要给原生的dom元素加入addClass等方法.先要知道加在哪个原型上面

引用一下MDN的API

Element

Element（元素）接口是 Document的一个对象. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。

这些继承自Element并且增加了一些额外功能的接口描述了具体的行为. 例如, HTMLElement 接口是所有HTML元素的基础接口，

而 SVGElement 接口是所有SVG元素的基本接口.

(function(e,doc){
//正则，用于替换，制表符，回事，换行，分页符
var rclass = /[\t\r\n\f]/g,
//首尾空格
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g ;

//如果没有trim方法则添加
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(rtrim, '');
};
};

//添加class
e.prototype.addClass = function(name) {
var cl=this.getAttribute("class");
if(!this.hasClass(name)) this.className=cl + " " + name;
return this;
};

//判断是否存在class 参考jquery
e.prototype.hasClass=function (name) {
var className = " " + name + " ";
if(this.nodeType == 1 && (" " + this.className + " ").replace(rclass, " ").indexOf( className ) >= 0 ){
return true;
}
return false;
};

//移除class
e.prototype.removeClass=function (name) {
if(this.nodeType === 1 && this.className){
var className= this.className ?
( " " + this.className + " " ).replace( rclass, " " ) :
"";
if(className){
className = className.replace(" " + name + " "," ");
this.className = className.trim();
}
}
return this;
};

//获取dom元素
window.dom=function(selector){
return doc.querySelector(selector);
}

})(Element,document);

测试一段html内容,引入上面的自执行函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
div{
line-height: 30px;
padding: 15px;
border: 1px solid #336699;
width: 70%;
}
a{display: inline-block;margin: 0 15px;background: #eee;padding: 0 10px;text-decoration: none;color: #666}
a.active{background: #336699;color: #fff}
</style>
</head>
<body>

<div class="demo1">
<a href="#" class="fdsd dds" data-mid-id="1" data-kis="1" id="demo__a1">menu1</a>
<a href="#" id="demo__a2" data-mid.id="2">menu2</a>
<a href="#" id="demo__a3" data-mid-id="3">menu3</a>
</div>

<div class="demo1__content" id="demo1__content">
暂时没有内容
</div>

<script>

(function () {
var m1=dom("#demo__a1"),
m2=dom("#demo__a2"),
m3=dom("#demo__a3"),
content=dom("#demo1__content");

m1.onclick=function () {
content.innerHTML="menu1______1111";
if(this.hasClass('active')){
this.removeClass('active');
}else{
this.addClass("active");
}
}
m2.onclick=function () {
content.innerHTML="menu2______2222";
if(this.hasClass('active')){
this.removeClass('active');
}else{
this.addClass("active");
}
}
m3.onclick=function () {
content.innerHTML="menu3______3333";
if(this.hasClass('active')){
this.removeClass('active');
}else{
this.addClass("active");
}
}

})();

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 原生addClass 原生hasClass js扩展

相关文章推荐

新的分享

章节导航