Question

我想用此代码执行动态Div大小。我希望使用加号和减号按钮来增大或减小div的大小。我应该做什么＆gt;

这是我的代码：

使用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';
    }

Answer 2

它没有做任何事情的原因是因为你的plusDiv函数接收了＃id; id＆＃34;但后来尝试使用＆＃34; i＆＃34;而且minusDiv方法没有任何内容。

这似乎对我有用：

<html>
    <head>
        <title>Div Height Test</title>
    </head>    
    <body>
        <style type="text/css">
            div {
                border: 1px dotted red;
                padding: 10px;
            }
        </style>
        <script type="text/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(i) {
                var el = document.getElementById(i);
                var height = el.offsetHeight;
                var newHeight = height + 200;
                el.style.height = newHeight + 'px';
            }

            function minusDiv(i) {
                var el = document.getElementById(i);
                var height = el.offsetHeight;
                var newHeight = height - 200;
                el.style.height = newHeight + 'px';
            }
        </script>
        <div id="output" class="out">

        </div>
    </body>

</html>

我想在javascript中做动态div高度

2 个答案: