为什么div.style.width=div.offsetWidth-1+"px"会使div宽度变宽而不是变窄？
来源：4-2 获取样式
记得喝水
2015-12-06 20:35
为什么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会引起不减反增的现象*/
}
</style>
<!-- javascript -->
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById("div1");
div1.onmouseover=function(){
move();
}
}
/*动画函数*/
function move(){
var div1=document.getElementById("div1");
setInterval(function(){
div1.style.width=div1.offsetWidth-1+"px";/*给div加上border之后，本应该使div1.style.width变窄，为什么反而增宽了？？？*/
},30);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
写回答
关注
1回答
-
- 木子舟义
- 2015-12-06 20:44:30
嗯 这个问题。首先 加了border之后，上下左右 你加的border是1px 也就是 上面1px 右边1px 下面1px 左边1px
那么 就等于 水平方向上多出了2px 的宽度。 对吧？
那么offsetWidth = 202px;对吧，
div.width = 200px 对吧，
202-1 =201 把这个201赋值给 div.width 不就比原来的多1了吗。
再下一次间歇调用。 offsetWidth = 201+ 2px的border值哦。
div.width = 203 -1 =202px
依次这样 就是递增的原因
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113925 学习 · 1443 问题
相似问题
宽度变化值不同？
回答 2
为什么我要宽度颜色却变了呢？
回答 1