使用原生JS实现JQuery的css()

HTMLElement.prototype.css = function(a,b){
    if(b != undefined){this.style.setProperty(a,b); return this;}//2
    else if(isJSONObject(a)){//3
        for(k in a) this.style.setProperty(k,a[k]);
        return this;
    }
    else{//1
        if(getComputedStyle) return document.defaultView.getComputedStyle(this,false)[a];
        else return Element.currentStyle[a];
    }
}
function isJSONObject(s){
    if(typeof s == "object"){
        try{
            let o = JSON.stringify(s);
            if(typeof o == "string" && o) return true;
            else return false;
        }catch(e){return false;}
    }
    return false;
}

通过HTMLElement.prototype给所有HTML元素注册该css()函数,由于兼容性问题,推荐把HTMLElement更换成Element再注册一遍。某些祖传浏览器没有HTMLElement。

JQuery的css()有几种用法:

  1. ele.css("style"),应返回对应的属性值。
  2. ele.css("style","value"),应设置对应的属性值。
  3. ele.css({"style1":"value1","style2":"value2","style3":"value3"}),以JSON对象形式传入多个属性进行设置。
  4. 不考虑函数写法,它既影响代码可读性又可以被轻松改写为正常JS代码。

这三种用法中,1和3传参是一个,2传参两个,可以通过参数数量分离出2;通过检验参数1是否为有效JSON对象,可以分离1和3。

getComputedStyle()用于获取元素最终的css样式。document.defaultView == window(绝大部分浏览器中),为了兼容性选择前者。IE早期无getComputedStyle()有Element.currentStyle,兼容。

测试表明该css()方法在各浏览器的新版本中完全正常。老版可能会有什么问题。

上一篇:jquery节点方法


下一篇:二、属性操作,文本属性值,元素操作,尺寸、位置操作