Question

当按下右箭头键时，我想使用div属性将10px的左侧位置增加style。这是我的剧本以及我到目前为止所尝试的内容：

document.onkeydown = KeyPressed;

function KeyPressed(k) {
 
    var LeftBtn = 37;
    var RightBtn = 39;
    var UpBtn = 38;
    var DownBtn = 40;
  
    if (k.keyCode == RightBtn) {
        document.getElementById("test").style.left = document.getElementById("test").style.left + 10px;
    }

}

#test {
    position: relative;
    left: 0px;
    width: 25px;
    height: 80px;
    background-color: black;
}

<div id="test"></div>

Answer 1

DOM元素的style属性本质上是一个带有字符串键值对的字典。它需要一个CSS密钥和一个正确的字符串值。

您当前的代码是left: 10px10px，对CSS来说没有多大意义。

为了实现这一点，您必须考虑px。

document.onkeydown = KeyPressed;

function KeyPressed(k) {

  var LeftBtn = 37;
  var RightBtn = 39;
  var UpBtn = 38;
  var DownBtn = 40;

  if (k.keyCode == RightBtn) {
    var moveEl = document.getElementById("test"),
      currLeft = parseInt(moveEl.style.left || 0);
    moveEl.style.left = (currLeft + 10) + 'px';
  }
}

#test {
  position: relative;
  left: 0px;
  width: 25px;
  height: 80px;
  background-color: black;
}

<div id="test"></div>

进一步阅读和示例 - HTMLElement.style

Answer 2

从px移除10。

if (k.keyCode == RightBtn) {
    document.getElementById("test").style.left = document.getElementById("test").style.left + 10;
}

Answer 3

尝试以下方式：

document.onkeydown = KeyPressed;

function KeyPressed(k) {

    var LeftBtn = 37;
    var RightBtn = 39;
    var UpBtn = 38;
    var DownBtn = 40;

    if(k.keyCode == RightBtn) {
        document.getElementById("test").style.left = parseInt(document.getElementById("test").style.left || 0) + 10 + 'px';
     }

}

Javascript将像素添加到div的当前位置

3 个答案: