标准下获取计算后样式
getComputedStyle(el)["attr"]
- 本身是一个函数，返回的值是一个对象
IE下获取计算后样式
el.currentStyle["attr"]
- 本身是元素上的一个属性
- currentStyle 不可以获取复合样式
- 获取backgroundImage 的 url 的时候获取到的是绝对路径
兼容版封装函数：
function getStyle(el,attr) {
if(el.currentStyle) {
return el.currentStyle[attr];
}
return getComputedStyle(el)[attr];
}
注：el(元素) attr(属性名称)
备注：因为el.currentStyle是一个属性，IE下是有这个属性的就会返回true，而标准下是没有这个属性的那就是undefined，undefined会返回false，所以可以用来做判断;
用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#wrap {
500px;
height: 500px;
}
</style>
<script type="text/javascript">
function getStyle(el,attr){
if(el.currentStyle){
return el.currentStyle[attr];
}
return getComputedStyle(el)[attr];
}
window.onload = function(){
var wrap = document.getElementById('wrap');
wrap.onclick = function() {
var width = parseFloat(getStyle(wrap,'width'));//获取div的宽
console.log(getStyle(wrap,"width"));
}
};
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>