使用原生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,style,return,getComputedStyle,JS,HTMLElement,else,css
来源： https://blog.csdn.net/LJM12914/article/details/122152507