一、高级浏览器和低级浏览器的不同写法
W3C制定的标准API,所有现代浏览器(包括IE9,但不包括之前的版本)都实现了window.getComputedStyle(),该方法接收一个要进行样式计算的元素,并返回一个样式对象。样式对象提供了getPropertyValue()的方法,用于检索特定CSS样式属性的计算样式。getPropertyValue方法接收css属性名称,而不是驼峰式的名称。getPropertyValue()可以不写,直接用方括号来检索属性也可以
console.log(getComputedStyle(oBox)["background-color"]); //颜色计算后结果就得到rgb的值
console.log(getComputedStyle(oBox)["background-position"]);
console.log(getComputedStyle(oBox)["background-image"]);
console.log(getComputedStyle(oBox)["border-color"]);
DOM提供给JS的API非常牛,一个元素此时的状态,完全可以被得到,好用的属性,但是不兼容。所以IE678不兼容getComputedStyle()方法,写另外一套写法:附加在元素身上的currentstyle属性,它表示和style点语法意义,使用驼峰命名法。
总结:
高级浏览器:
window.getComputedStyle(oBox).getPropertyValue("padding-left");
getComputedStyle(oBox).getPropertyValue("padding-left");
getComputedStyle(oBox)["padding-left"];
IE6/7/8
oBox.currentStyle.paddingLeft
oBox.currentStyle["paddingLeft"];
封装兼容写法:
IE678浏览器,不认识getComputedStyle视为错误
Chrome等浏览器,不认识currentStyle视为错误
只浏览器的能力。所以要进行能力检测,可以在不同浏览器中得到兼容性的写法,输出CSS属性的值。
封装一个兼容性的函数获取一个元素某个CSS属性值的方法。
API:传入两个参数,第一个是元素对象,第二个是CSS属性名
返回值是这个传入元素对象的属性值。
var oBox = document.getElementById('box');
function getStyle(obj,property){
//能力检测
if(window.getComputedStyle){
//高级浏览器,要把用户输入的property属性中检测一下是不是驼峰,如果是就转为连字符写法
//强制把用户输入的大写字母,变为小写加-
//paddingLeft 转为 padding-left
property = property.replace(/([A-Z])/g,function(match,$1){
return "-" + $1.toLowerCase()
});
return window.getComputedStyle(obj)[property];
}else{
//IE只认识驼峰,要防止用户输入短横,要把短横改为大写字母
//padding-left转为 paddingLeft
property = property.replace(/-([a-z])/g,function(match,$1){
return $1.toUpperCase()
});
return obj.currentStyle[property];
}
}
alert(getStyle(oBox,"paddingLeft"));