chrome中用户输入的动态div高度答案

【问题标题】：User-inputted dynamic div height in chromechrome中用户输入的动态div高度
【发布时间】：2010-12-27 22:54:41
【问题描述】：

我发现（未编写）一段用于可调整大小的 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 方法更好。不过，我希望上面的代码在 chrome 上也能像在 FF/IE 上一样工作，这样我就不必检查浏览器类型了。

【问题讨论】：

为了将来参考，您可以突出显示要格式化显示的整个代码部分，然后单击文本区域上方的 {} 图标进行格式化。

标签： javascript google-chrome onmousedown expandable

【解决方案1】：

<!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>

【讨论】：

弗里金令人印象深刻。不错的工作。在 IE 中不起作用，但在 FF 和 chrome 中却非常流畅。
所以.....知道为什么当我们用 attachEvent 替换 addEventListener 并摆脱冒泡的布尔值时，为什么这在 IE 中什么都不做（虽然没有错误）？
我只是提供一点帮助，如果你想了解 JavaScript，你需要努力。代码重写。