0

我正在尝试使用 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>

单击按钮时，没有任何反应。

4

2 回答 2

1

使用“offsetHeight”可以得到元素的高度。

尝试这个：

document.getElementById("box").style.height = document.getElementById("box").offsetHeight +50+'px'

于 2019-07-19T18:23:16.500 回答
0

问题是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"; 
};
于 2019-07-19T18:26:52.113 回答