93 添加class 移出class 移除/移出link或style的css规则,不常用

Base.js



var $=function()//调用
{
    return new Base();
};
//对象式
function Base()
{
    //创建一个数组来获取节点和节点的数组
    this.elements=[];//私有化,不共用

}


//获取ID节点
Base.prototype.getId=function(id)
{
    this.elements.push(document.getElementById(id));
    return this;
};
//获取元素节点
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;
};
//class获取
Base.prototype.getClass=function(className)
{
    var all=document.getElementsByTagName("*");
    for(var i=0;i<all.length;i++)
    {
      if(all[i].className==className)
      {
          this.elements.push(all[i]);
      }
    }
   return this;
};
//获取某个节点
Base.prototype.eq=function(num) //调用 $().getClass("className").eq(0).css("background","red")
{
    var element=this.elements[num];
    this.elements=[];//清空数组
    this.elements[0]=element;//重新赋值
    return this;
};
//设置css
Base.prototype.css=function(attr,value)
{
    for(var i=0;i<this.elements.length;i++)
    {
        if(arguments.length==1)
        {
            if(typeof window.getComputedStyle!="undefined")
            {
                return window.getComputedStyle(this.elements[i],null)[attr];
            }
            else if(typeof this.elements[i].currentStyle !="undefined")
            {
                return this.elements[i].currentStyle[attr];
            }


        }
        this.elements[i].style[attr]=value;


    }
    return this;
};


Base.prototype.click=function(fn)
{
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].οnclick=fn;
    }
    return this;
};
//设置innerHtml 获取innerHTML
Base.prototype.html=function(value)
{


    for(var i=0;i<this.elements.length;i++)
    {
        if(arguments.length==0)
        {
            return this.elements[i].innerHTML;
        }
        else
        {
            this.elements[i].innerHTML=value;
        }


    }
    return this;
};
//添加class
Base.prototype.addClass=function(className)
{
   for(var i=0;i<this.elements.length;i++)
   {
       if(!this.elements[i].className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')))//判断是否已经有这个class
       {
           this.elements[i].className+=' '+className;
       }
   }
    return this;
};
//移出class
Base.prototype.removeClass=function(className) //调用方法$().getClass("dd").addClass("a").addClass("b").removeClass("b");
{
    for(var i=0;i<this.elements.length;i++)
    {
        if(this.elements[i].className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')))//判断是否已经有这个class
        {
            this.elements[i].className=this.elements[i].className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),'');
        }
    }
    return this;
};
//添加link或style的css规则,不常用
Base.prototype.addRule=function(num,selectorText,cssText,position) //调用方法, $().addRule(0,"body","background:red",0)
{
    var sheet=document.styleSheets[num];
    if(typeof sheet.insertRule!="undefined")//w3c
    {
        sheet.insertRule(selectorText+"{"+cssText+"}",position);
    }
    else if(typeof  sheet.addRule!="undefined")//iE
    {
        sheet.addRule(selectorText,cssText,position);//sheet.addRule("body","background:red",)
    }
};
//移除link或style的css规则,不常用
Base.prototype.addRule=function(num,index) //调用方法,  $().removeRule(0);
{
    var sheet=document.styleSheets[num];
    if(typeof sheet.deleteRule!="undefined")//w3c
    {
        sheet.deleteRule(index);
    }
    else if(typeof  sheet.removeRule!="undefined")//iE
    {
        sheet.removeRule(index);//sheet.addRule("body","background:red",)
    }
};



demo.js //调用base.js函数

window.οnlοad=function()
{
   // var base=new Base();
    //alert(base.getId("box").elements)
    $().getClass("dd").addClass("a").addClass("b").removeClass("b");
    $().addRule(0,"body","background:red",0)
    $().removeRule(0);

};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陆康永

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值