Question

我正在尝试使用JS工作表制作一个按钮，当按下该按钮时，该正方形将增加50个像素（高度和宽度）。我想通过数学运算符（加法）而不是通过声明新值来做到这一点，因此可以多次按下按钮。

这是结合多种编码语言的练习。我被允许根据需要更改HTML以使其工作。另外，最初的工作只是使按钮只能工作一次（因此，设置新的像素大小很容易）

以下是我正在使用的HTML和JavaScript：

document.getElementById("button1").addEventListener("click", growByFifty);

function growByFifty() {
  document.getElementById("box").style.height += 50 + "px";
  document.getElementById("box").style.width += 50 + "px";
};

<div id="box" style="height:150px; width: 150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>

单击按钮后，什么也没有发生。

Answer 1

使用“ offsetHeight”可以获取元素的高度。

尝试一下：

document.getElementById（“ box”）。style.height = document.getElementById（“ box”）。offsetHeight + 50 +'px'

Answer 2

问题是style.height和style.width不返回元素的尺寸。您需要为此使用offsetHeight和offsetWidth。我更正了您的JavaScript代码：

document.getElementById("button1").addEventListener("click", growByFifty);

function growByFifty() {

    let currentHeight = document.getElementById("box").offsetHeight,
        currentWidth = document.getElementById("box").offsetWidth;

    document.getElementById("box").style.height = (currentHeight + 50) + "px"; 
    document.getElementById("box").style.width = (currentWidth + 50) + "px"; 
};

使用JS通过数学运算修改样式元素

2 个答案: