javascript - 我想在 javascript 中做动态 div 高度

Question

我想用这段代码做动态 Div 大小。我希望 div 的大小可以通过加号和减号按钮来增加或减小。我该怎么办>

这是我的代码:

Javascript:

window.onload=function(){
    var output = document.getElementById('output');
    var i=1;
    //var val="";
    while(i<=3)
    {

        if(!document.getElementById('timedrpact'+i))
        {
            var ele = document.createElement("div");
            ele.setAttribute("id",i);
            ele.setAttribute("class","inner");
            //ele.innerHTML="hi "+i;

            var bplus = document.createElement('button');
            bplus.setAttribute('content', 'plus');
            bplus.setAttribute('class', 'bplus');
            bplus.setAttribute('onClick', 'plusDiv('+i+');');
            bplus.style.setProperty ("background-color", "green", null);
            bplus.style.setProperty ("color", "green", null);
            bplus.innerHTML = '!!!!';

            var bminus = document.createElement('button');
            bminus.setAttribute('content', 'minus');
            bminus.setAttribute('onClick', 'minusDiv('+i+');');
            bminus.setAttribute('class', 'bminus');
            bminus.style.setProperty ("background-color", "red", null);
            bminus.style.setProperty ("color", "red", null);
            bminus.innerHTML = '!!';

            output.appendChild(ele);
            ele.appendChild(bplus);
            ele.appendChild(bminus);

        }
        i++;


    }
};

function plusDiv(id) {
    var el = document.getElementById(i);
    var height = el.offsetHeight;
    var newHeight = height + 200;
    el.style.height = newHeight + 'px';
}

function minusDiv() {
    var el = document.getElementById(i);
    var height = el.offsetHeight;
    var newHeight = height - 200;
    el.style.height = newHeight + 'px';
}

HTML

<div id="output" class="out">

</div>

CSS

div {
 border: 1px dotted red;
 padding: 10px;    
}

当我点击按钮时，它没有做任何事情。

我想用加号和减号按钮调整这个 Div 的大小。

有什么想法吗？

Answer 1

你的代码有错误试试这个

function plusDiv(id) {
        var el = document.getElementById(id);
        var height = el.offsetHeight;
        var newHeight = height + 200;
        el.style.height = newHeight + 'px';
    }

    function minusDiv(id) {
        var el = document.getElementById(id);
        var height = el.offsetHeight;
        var newHeight = height - 200;
        el.style.height = newHeight + 'px';
    }

---