获取或设置行间样式
oDiv.style.width
获取行间/内联/外部样式，无法设置
IE6-8 :
oDiv.currentStyle.widthoDiv.currentStyle['width']
高级浏览器 : window可以省略
window.getComputedStyle(oDiv, null).widthwindow.getComputedStyle(oDiv, null)['width']
width & offsetWidth
width是css中设置的尺寸，而offsetWidth则是盒子真实的尺寸（边框，padding， maring等）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<script>
window.onload = function(){
var div = document.getElementById("div");
console.log(div.style.width); //只能获取或设置行间样式
console.log(getComputedStyle(div , null).width);
console.log(div.offsetWidth);
}
</script>
</head>
<body>
<div id="div">
</div>
</body>
</html>
QQ图片20170318162417.png
定义一个获取style的共通方法 getStyle()
在之前是运动中使用offset都不正确
<script>
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
window.onload = function(){
var div = document.getElementById("div");
alert(getStyle(div, 'width')); // 200px
}
</script>
网友评论