新手关于JS封装库获取设置css样式的问题

为什么我封装了var $=function（）{return new Base};后面对象还是吧前面的对象设置的背景颜色覆盖了呀？

这是我的封装库

    //前台调用
var $=function(){
    return new Base()
};

//基础库
function Base(){}
//创建一个数组，来保存获取的节点和节点数组
Base.prototype.elements=[];
//获取ID节点
Base.prototype.getId=function(id){
    this.elements.push(document.getElementById(id));
    return this;
};
//获取Name节点
Base.prototype.getName=function(name){
    this.elements.push(document.getElementsByName(name));
    return this;
};
//获取元素节点（tagName)
Base.prototype.getTagName=function(tag){
    var tags=document.getElementsByTagName(tag);
    for(var i=0;i<tags.length;i++){
        this.elements.push(tags[i]);
    }
    return this;
};

这是我的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试1</title>
    <style>
        #box{
            width: 200px;
 height: 200px;
 border: 1px solid #000;
 }
        .aaa{
            font-size: 30px;
 }
    </style>
    <script src="base.js"></script>
    <script>
 window.onload=function(){
             $().getId("box").css("color","pink").css("background","green");
             $().getTagName("p").css("background","blue")
        }
    </script>
</head>
<body>
<div id="box">`box</div>
<p class="aaa">段落</p>
<p>段落</p>
<p class="aaa">段落</p>
<p>段落</p>

</body>
</html>

为什么后面的还是会覆盖了前面的样式啊

$().getId("box").css("color","pink").css("background","green");
$().getTagName("p").css("background","blue")

我前面调用了$应该算是

Ni14

浏览 1455回答 1

1回答

MrTreasure

你封装的对象就有问题，getID,getTagName返回的是对象Base的实例，而不是base.elements,而且css（）是jq的方法，不是原生的方法，你这段代码应该没生效

1 0

随时随地看视频慕课网APP