//1.行业样式获取方式(不常用)
box.style.width
2.window.getComputedStyle(1,2)
2->当前元素的伪类 IE6,7,8不兼容 只读
currentStyle返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的<style>属性等)。currentStyle属性貌似不支持伪类样式获取
getComputedStyle
getPropertyValue方法可以获取CSS样式申明对象上的属性值(直接属性名称),例如
window.getComputedStyle(element, null).getPropertyValue("float");
如果我们不使用getPropertyValue方法,直接使用键值访问,其实也是可以的。但是,比如这里的的float,如果使用键值访问,则不能直接使用getComputedStyle(element, null).float,而应该是cssFloat与styleFloat,自然需要浏览器判断了
这个方法是获取所有经过浏览器计算过的样式,经过浏览器渲染过的样式
CSSStyleDeclaration:包含了当前元素所有的样式属性和值*/
console.log(box.style.width);
console.log(window.getComputedStyle(box,null));
console.log(window.getComputedStyle(box,null)["height"]);
//try catch 必须保证try中的代码在不兼容浏览器中执行的时候报错:
//比较消耗性能
function getCss(curEle,attr){
var val=null;
//111 try {
// val=window.getComputedStyle(curEle,null)[attr];
// } catch(e) {
// val=curEle.currentStyle[attr];
// }
if("getComputedStyle" in window){//window.getComputedStyle
val=window.getComputedStyle(curEle,null)[attr];
}else{
val=curEle.currentStyle[attr];
}
return val;
}
//3.通过检测浏览器版本和类型来处理兼容
console.log(window.navigator.userAgent);