我发现(未编写)一段可调整大小的 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 上运行,这样我就不必检查浏览器类型了。