Question

当用户按下向上箭头时，我试图将气球表情符号的大小连续增加10px，同时使用键盘上的向下箭头将气球表情符号的大小减小10px。

我一直在尝试设置：

let size = para.style.fontSize;

以获取尺寸的变量，然后通过在我的函数中添加+/- 10px来调整该值。但是，我尝试了这种方法，似乎无法设置：

para.style.fontSize = size +10;

有人有什么建议可以使它正常工作吗？

注意：我发现下面的代码没有包含size变量，因为我发现它不起作用。

<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
  <style>
    p {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <p></p>

  <script>
    let para = document.querySelector('p');


    window.addEventListener("keydown", e => {
    if (e.key == "ArrowUp") {
      para.style.fontSize = '60px';
    } else {
      para.style.fontSize = '40px';
    }
  });



  </script>

</body>

</html>

Answer 1

要在多个keydown事件上实现增长/收缩行为，您需要为每个事件递增/递减para.style.fontSize。一旦做到这一点，方法如下：

<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
  <style>
    p {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <p></p>

  <script>
    let para = document.querySelector('p');

    window.addEventListener("keydown", e => {

      let currentSize = parseInt(para.style.fontSize);

      // If unable to determine current fontSize, default to 50
      if (isNaN(currentSize)) {
        currentSize = 50;
      }

      // Define the rate of change
      let changeAmount = 5;

      if (e.key == "ArrowUp") {
        para.style.fontSize = (currentSize + changeAmount) + 'px';
      } else {
        // Protect againt zero or negative font sizes via Math.max() 
        para.style.fontSize = Math.max(changeAmount, currentSize - changeAmount) + 'px';
      }
    });
  </script>

</body>

</html>

Answer 2

问题是当前的fontSize属性为null，因此您不能将其添加为null值。第二个问题是fontSize属性实际上是带有“ px”的字符串。因此，如果要增加或减少该值，则需要解析出整数值。然后，将其分配回para.style.fontSize时，需要附加“ px”。

这是您进行上述更改的代码。

<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
  <style>
    p {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <p></p>

  <script>
    let para = document.querySelector('p');
    // Set to default size
    para.style.fontSize = '24px';


    window.addEventListener("keydown", e => {
    var sizeAsInteger = parseInt(para.style.fontSize, 10);
    if (e.key == "ArrowUp") {
      sizeAsInteger += 10;
    } else {
      sizeAsInteger -= 10;
      
    }
    para.style.fontSize = sizeAsInteger + 'px';
  });



  </script>

</body>

</html>

Answer 3

请注意，如果先抓size然后再做console.log(size)，则第一轮将获得空白结果（因为最初未设置），随后的所有回合中，尺寸为{ {1}}附加到末尾。因此，初始大小为px的{{1}}将给您size + 10。这会导致不良行为。

要解决此问题，您需要删除40px，转换为数字，然后再次附加40px10：

px

如何使用Javascript中的“ ArrowUp”增加表情符号的大小

3 个答案: