Question

我想在每次调用onClick函数时添加100px（或任意数量）的CSS高度。

点击＆＃34;按钮1＆＃34; -CSS添加100px的高度点击＆＃34; button1＆＃34;再次 - CSS增加100px的高度等。

是循环吗？这是一个If声明吗？我应该放弃并追求成为产品经理吗？

＆＃13;

var growButton = document.getElementById("box");
var growParse = parseInt(growButton.style.height, 10);

function grow() {
growButton.style.height = (growParse + 100) + "px";
}

＆＃13;

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

＆＃13;

Answer 1

您无需成为产品经理。您只需要在函数中运行growParse。

var growButton = document.getElementById("box");
var growParse = parseInt(growButton.style.height, 10);


function grow() {
  growParse = parseInt(growButton.style.height, 10);

  growButton.style.height = (growParse + 100) + "px";
}

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

Answer 2

尝试使用此

function incHeight() {
        var el = document.getElementById("box");
        var height = el.offsetHeight;
        var newHeight = height + 100;
        el.style.height = newHeight + 'px';
}

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

重复onClick函数 - 选项

2 个答案: