為什么div.style.width=div.offsetWidth-1+"px"會使div寬度變寬而不是變窄？
為什么div.style.width=div.offsetWidth-1+"px"會使div寬度變寬而不是變窄？對4-2獲取樣式中的例子？但還不是很理解為什么會這樣？？求大神些解釋下，謝謝!
<!DOCTYPE?HTML>
<html?lang="en/zh">
<head>
<meta?charset="UTF-8">
<title>4-2獲取樣式</title>
<style?type="text/css">
*{
margin:0px;
padding:?0px;
}
#div1{
width:?200px;
height:?200px;
background-color:?red;
border:?1px?solid?red;/*加上border會引起不減反增的現(xiàn)象*/
}
</style>
<!--?javascript?-->
<script?type="text/javascript">
window.onload=function(){
var?div1=document.getElementById("div1");
div1.onmouseover=function(){
move();
}
}
/*動畫函數(shù)*/
function?move(){
var?div1=document.getElementById("div1");
setInterval(function(){
div1.style.width=div1.offsetWidth-1+"px";/*給div加上border之后，本應(yīng)該使div1.style.width變窄，為什么反而增寬了？？？*/
},30);
}
</script>
</head>
<body>
<div?id="div1"></div>
</body>
</html>
2015-12-06
嗯 這個(gè)問題。首先 加了border之后，上下左右 ?你加的border是1px ?也就是 上面1px 右邊1px 下面1px 左邊1px?
那么 就等于 水平方向上多出了2px 的寬度。 對吧？
那么offsetWidth = 202px;對吧，
div.width = 200px 對吧，
202-1 =201 把這個(gè)201賦值給 div.width 不就比原來的多1了嗎。
再下一次間歇調(diào)用。 offsetWidth = 201+ 2px的border值哦。 ?
div.width = 203 -1 =202px ?
依次這樣 就是遞增的原因