Question

的index.html

<body id="body">
  <div id="box1" class="box"></div>
  <script type="text/javascript" src="js/main.js"></script>
</body>

的style.css

.box {

  padding: 2em;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  background-color: green;
}

当您在键盘上按“e”时，我尝试使用JavaScript来执行某些功能，您可以自动将+10像素添加到div（框）大小。它看起来像这样：

main.js

document.onkeydown = function (event) {
  var key = event.keyCode || event.which;
  switch (key) {
    case 81:
      var main = document.getElementsByClassName('box').offsetHeight;
      var sidebar = document.getElementsByClassName('box').offsetWidth;
      main += 10 +'px';
      sidebar += 10 +'px'
      break;
    default:
      console.log('option no valid!');
  }
};

但它不起作用。

Answer 1

你的代码出了很多问题......

首先，您调整main和sidebar的计算不正确，会导致连接，而不是添加。

此外，您没有对新计算的值执行任何操作。只是因为你设置一个等于属性的变量并不意味着你有对该属性的双向绑定。你所做的就是获得价值。如果要设置值，则必须回写该属性。我假设您要更改框中的height和width（offsetheight和offsetwidth是只读的。）

接下来，当您使用querySelectorAll()搜索元素时，它将返回一个类似于数组的对象，其中包含与查询匹配的所有元素，您必须从集合中获取要使用的元素一个索引。如果您只希望在查询中找到一个元素，请使用querySelector()而不是querySelectorAll()，因为querySelector()会直接返回对找到的元素的引用（因此不需要索引）然后停止搜索。

接下来，e密钥代码为69，而不是81。

document.onkeydown = function (event) {
  var key = event.keyCode || event.which;
  console.log("Key code is: " + key + " - Key pressed was: " + String.fromCharCode(key));
  switch (key) {
    case 69:
        // Note the [0] at the end of this line to extract the first
        // element in the set of matched elments.
        var box = document.getElementsByClassName('box')[0];
      
        // Get the values you need
        var main = box.offsetHeight;
        var sidebar = box.offsetWidth;
      
        // Do the math first, then concatenate the "px" and assign the answer back to the variable
        main = (main + 10) +'px';
        sidebar = (sidebar + 10) +'px'
        
        // Now use the new values by assigning them to the correct properties of the object:
        box.style.height = main;
        box.style.width = sidebar;
        break;
    default:
      console.log('option no valid!');
      break;
  }
}

.box {
  padding: 2em;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  height: 5px;
  width: 5px;
  background-color: green;
}

<div id="box1" class="box"></div>

当我按下键盘上的特定字母时，我想更改div大小

1 个答案: