js原生扩展addClass,removeClass,hasClass

最新推荐文章于 2023-08-13 11:32:37 发布

花村大地主

最新推荐文章于 2023-08-13 11:32:37 发布

阅读量2.5k

点赞数

分类专栏： javascript 文章标签：原生addClass 原生hasClass js扩展

本文链接：https://blog.csdn.net/jayhkw/article/details/53742758

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

参考了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>

花村大地主

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js原生扩展addClass,removeClass,hasClass

参考了jquery对应的方法首先要给原生的dom元素加入addClass等方法.先要知道加在哪个原型上面引用一下MDN的APIElement Element（元素）接口是 Document的一个对象. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。这些继承自Element并且增加了一些额外功能的接口描述了具体的行为. 例如, HTMLElement 接口是所有HTML元素
复制链接

扫一扫