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()有几种用法:
- ele.css("style"),应返回对应的属性值。
- ele.css("style","value"),应设置对应的属性值。
- ele.css({"style1":"value1","style2":"value2","style3":"value3"}),以JSON对象形式传入多个属性进行设置。
- 不考虑函数写法,它既影响代码可读性又可以被轻松改写为正常JS代码。
这三种用法中,1和3传参是一个,2传参两个,可以通过参数数量分离出2;通过检验参数1是否为有效JSON对象,可以分离1和3。
getComputedStyle()用于获取元素最终的css样式。document.defaultView == window(绝大部分浏览器中),为了兼容性选择前者。IE早期无getComputedStyle()有Element.currentStyle,兼容。
测试表明该css()方法在各浏览器的新版本中完全正常。老版可能会有什么问题。