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

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

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

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

document.getElementById（“button1”）.addEventListener（“单击”，增长50倍）；
函数增长50（）{
document.getElementById（“box”）.style.height+=50+“px”；
document.getElementById（“box”）.style.width+=50+“px”；
};

生长
使用“offsetHeight”可以获得元素的高度

试试这个：

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

问题是
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"; 
}; 

您正在告诉它连接这些值。“50px”、“50px50px”、“50px50px50px”等