如何使用javascript和html增加和减少div的大小

我想使用javascript函数调整div的位置。 我试图解决这个问题，但这不是正确的工作。In thet div仅在右侧拖动。我想当用户在div2上拖动光标时，然后更改光标的样式。每当用户按下鼠标左键并拖动左侧时，div1的大小应该减小 右边的阻力应该是递增的。 我的密码在这里

在这种情况下，只有递增和光标样式不能正常工作。当我在div2上移动光标时，光标会闪烁

我拍摄了3个div，在div2id=div2中拍摄一个iframe id=frame1，在div1id=div1中拍摄一个图像，在div3iddiv3中拍摄一个frameid=frame2。

---

我想在向右拖动光标时，div2和frame1的大小应该是递减的。

尝试更改javascript中的id，以匹配HTML中的id，这就是我要开始的地方。还要确保浏览器的错误控制台中没有出现错误

html div3，frame2中的ID与代码div2，frame1中的ID不匹配可能没有帮助。您是否尝试过设置div2.style.width=event.x+px；？

    <div onmousedown="dStarted(event);" onmousemove="dMoving(event,this);" onmouseup="dEnd(event,this);" style="float: left; height: 100%; border-right: solid 1px black; background-color:LightGrey" id="div1">
        <a href="#" onclick="toggle();">
            <img style="background-color:White;" id="imgToggle" />
        </a>
    </div>
    <div style="float: left; height: 100%;" runat="server" id="div3">
        <iframe frameborder="0" framespacing="0" id="frame2" runat="server" height="100%" width="100%" noresize="noresize" class="WZSplitterPanel"></iframe>
    </div>

        var dragged=false;
        function dStarted(event)
        {
            dragged =true;
        }


        function dMoving(event,ele)
        {
                ele.style.cursor = "e-resize";
                var div2 =document.getElementById("div2");
                div2.style.width = event.x;
                var frm1=document.getElementById("frame1");
                frm1.style.width=div2.style.width;
        }

        function dEnd(event, ele)
        {
            if(dragged)
            {
                ele.style.cursor = "default";
                dragged=false;
            }
            return;
        }