用户输入的 Chrome 动态 div 高度

发布于 2024-10-09 19:45:08 字数 1949 浏览 5 评论 0原文

我发现（未编写）一段可调整大小的 div 代码，它在 Firefox 和 IE 中工作得很好，但在 Chrome 中很难扩展——如果您尝试拉伸它，它通常会忽略您。我什至不知道这是为什么——很难排除故障。

任何关于为什么 chrome 经常拒绝扩展这个 div 的提示都会很好。自己尝试一下。

#mydiv{
    position:relative;
    top:0px;
    left:0px;
    width:250px;
    border: 1px solid #808080;
    overflow: auto;
}

#statusbar{
    cursor: s-resize;
    position:relative;
    display:block;
    background-color: #c0c0c0;
    font-size: 0px;
    margin:0;
    height:5px;
    border: 1px solid #808080;
    padding:0;
    width: 250px;
}

脚本：

var curHeight=0;
var curMousePos=0;
var mouseStatus='up';
var curEvent;

//this function gets the original div height
function setPos(e){
    curEvent=(typeof event=='undefined'?e:event);
    mouseStatus='down';
    //gets position of click
    curMousePos=curEvent.clientY;
    curHeight=parseInt(document.getElementById('mydiv').style.height.split('p')[0]);
}

//this changes the height of the div while the mouse button is depressed
function getPos(e){
    if(mouseStatus=='down'){
        curEvent=(typeof event=='undefined'?e:event);
        //how many px to update the div? difference of previous and current positions
        var pxMove=parseInt(curEvent.clientY-curMousePos);
        var newHeight=parseInt(curHeight+pxMove);
        //conditional to set minimum height to 5
        newHeight=(newHeight<5?5:newHeight);
        //set the new height of the div

        document.getElementById('mydiv').style.height=newHeight+'px';
    }
}

最后是 HTML：

    <div>
    <div id="mydiv" style="height: 250px; min-height:150px; ">
        <div></div>
    </div>
    <div onmousedown="setPos(event)" onmouseup="mouseStatus='up'" id="statusbar"></div>
</div>

编辑：似乎 chrome 支持 CSS3 属性 RESIZE。这太棒了，完全比我使用的 JS 方法更好。不过，我希望上面的代码能够像在 FF/IE 上一样在 chrome 上运行，这样我就不必检查浏览器类型了。

原文

I have found (not written) a piece of code for a resizable div that works beautifully in firefox and IE, but in Chrome it's very difficult to expand--it often just ignores you if you try to stretch it. I'm not even sure why this is--it's difficult to troubleshoot.

Any hint as to why chrome is often refusing to expand this div would be nice. Try for yourself.

#mydiv{
    position:relative;
    top:0px;
    left:0px;
    width:250px;
    border: 1px solid #808080;
    overflow: auto;
}

#statusbar{
    cursor: s-resize;
    position:relative;
    display:block;
    background-color: #c0c0c0;
    font-size: 0px;
    margin:0;
    height:5px;
    border: 1px solid #808080;
    padding:0;
    width: 250px;
}

scripts:

var curHeight=0;
var curMousePos=0;
var mouseStatus='up';
var curEvent;

//this function gets the original div height
function setPos(e){
    curEvent=(typeof event=='undefined'?e:event);
    mouseStatus='down';
    //gets position of click
    curMousePos=curEvent.clientY;
    curHeight=parseInt(document.getElementById('mydiv').style.height.split('p')[0]);
}

//this changes the height of the div while the mouse button is depressed
function getPos(e){
    if(mouseStatus=='down'){
        curEvent=(typeof event=='undefined'?e:event);
        //how many px to update the div? difference of previous and current positions
        var pxMove=parseInt(curEvent.clientY-curMousePos);
        var newHeight=parseInt(curHeight+pxMove);
        //conditional to set minimum height to 5
        newHeight=(newHeight<5?5:newHeight);
        //set the new height of the div

        document.getElementById('mydiv').style.height=newHeight+'px';
    }
}

finally the HTML:

    <div>
    <div id="mydiv" style="height: 250px; min-height:150px; ">
        <div></div>
    </div>
    <div onmousedown="setPos(event)" onmouseup="mouseStatus='up'" id="statusbar"></div>
</div>

EDIT: seems chrome supports the CSS3 property RESIZE. This is awesome and totally better than the JS approach I used. Still, I wish the above code worked on chrome as it does on FF/IE so I wouldn't have to check for the browser type.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

音盲 2024-10-16 19:45:08

在此处输入图像描述

<!doctype html>

<html>
    <head>
        <script>
            window.onload = function () {
                var div = document.getElementById ("statusBar");

                var press = false;

                div.onmousedown = function () {
                    press = true;

                    return false;
                }

                this.onmousemove = function (event) {
                    event = event ? event : window.event;

                    if (press === true) {
                        div.style.height = event.clientY + "px";
                    }
                }

                this.onmouseup = function () {
                    press = false;
                }
            }
        </script>

        <style>
            #statusBar {
                background-color: #c0c0c0;
                border: 1px solid #808080;
                cursor: s-resize;
                margin: 0;
                min-height: 5px;
                padding: 0;
                width: 250px;
            }
        </style>

        <title></title>
    </head>

    <body>
        <div id = "statusBar"></div>
    </body>
</html>

enter image description here

<!doctype html>

<html>
    <head>
        <script>
            window.onload = function () {
                var div = document.getElementById ("statusBar");

                var press = false;

                div.onmousedown = function () {
                    press = true;

                    return false;
                }

                this.onmousemove = function (event) {
                    event = event ? event : window.event;

                    if (press === true) {
                        div.style.height = event.clientY + "px";
                    }
                }

                this.onmouseup = function () {
                    press = false;
                }
            }
        </script>

        <style>
            #statusBar {
                background-color: #c0c0c0;
                border: 1px solid #808080;
                cursor: s-resize;
                margin: 0;
                min-height: 5px;
                padding: 0;
                width: 250px;
            }
        </style>

        <title></title>
    </head>

    <body>
        <div id = "statusBar"></div>
    </body>
</html>

回复收藏 0 原文

~没有更多了~