初学者总是会遇到各种各样的问题，我们都知道style.width和offsetWidth，但是用到的时候难免会出现一些问题，下面是我遇到的一些问题。。。
明明设置了width的值但是用js获取style.width的时候却为空，而offsetWidth不会
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-color: red;
height: 50px;
width: 500px;
margin-top: 10px;
border: 1px solid #000;
padding: 10px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('div');
alert(div.style.width);
alert(div.offsetWidth);
}
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>此时，弹出的style.width的值为空，而offsetWidth的值为522。
style.width的值为空是因为它只获取行内样式，而我们设置的是行间样式，所以为空，当我们设置行内样式时，它会弹出宽度，且是带有px的字符串。所以使用的时候要注意。
offsetWidth的值=width+border+padding，所以弹出了522，offsetWidth的值为数值不是带有px的字符串。
我们可以把 alert(div.style.width);改为 alert(document.defaultView.getComputedStyle(div,null)['width']);
这样就能够获取到样式表中定义的样式 了。
给div添加运动事件,让div的宽度不断变小，直到100px的时候停止
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('div');
var step=-1;
var timer=null;
setInterval(function(){
if(div.offsetWidth==100)
{
clearInterval(timer);
}
else{
div.style.width=div.offsetWidth+step+'px';
}
},30);
}
</script>
而当我们给div添加边框是就会出现问题
div的宽度不断变大而且不会停止，这就是offsetWidth的Bug，所以使用时也要非常注意。
3421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
