Question

CSS：

 <style>
#container {
  width: 200px;
  height: 200px;
  background: green;
  position: relative;

}
#box {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
}
</style>
<div id="container">
   <div id="box"> </div>
</div>

JavaScript：

var pos = 0; 
var box = document.getElementById("box");
function move() {
  pos += 1;
  box.style.left = pos+"px"
}

如果我仅使用box.style.left = "150px"，则红色框将位于绿色框的角落，但是如果我使用box.style.left = pos+"50px"，则会发生相同的情况，我不知道为什么？我不明白为什么还要先声明变量pos。

Answer 1

这是pos = pos +1;

的简写

然后将其用于为div设置样式，使div的框右边的像素为1像素（基于左边距），因此它将在页面上向右微移。

您需要某种与HTML标记中的按钮关联的点击处理程序，以调用move来使事情发生。

Answer 2

pos +'50px'为150px，因为数字加字符串，将被串联在一起，如下所述。

pos = 0

pos += 1 //pos = 0 + 1 = 1

pos = 1 + '50px' // 150px ,as string it concatenates to 150px

codepen = https://codepen.io/nagasai/pen/QYzEEp

pos + = 1在这里有什么用？

2 个答案: