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

Question

I want to resize the position of the div using javascript function. I was tried to solve that but this is not properly work. In thet div only dragged right side. i want to whener user drag cursor on div2 then change the style of the cursor and whenever user press the mouse left key and drag the left side then size of the div1 should be decresed and drag on right then side should be increse. My code is here.

    <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;
        }

in that size only increse and cursor style not properly work. whener i move the cursor on div2 then cursor blink .

I have taken 3 div , In div2(id="div2") take one iframe id="frame1" and in div1 id="div1" take one image and div3 id"div3" take one frame id="frame2". i want to when drag the cursor right side then div2 and frame1 size should be decrese.

Answer 1

Try changing the id's in your javascript to match the ones in the HTML that's where I would start. Also make sure you're not getting errors in your browser's error console.