首先看一下baidu的例子
<html>
<head>
</head>
<body οnlοad="Main.onLoad();">
<div id="divtest" style="height: 100px; background: #f00;"></div>
<input type="button" οnclick="disappear();" value="消失" />
<script type="text/javascript">
function disappear() {
var divtest = document.getElementById("divtest");
var interval_disappear = setInterval(function() {
if(divtest.offsetWidth == 0) {
clearInterval(interval_disappear);
}
divtest.style.width = divtest.offsetWidth - 1 + "px";
}, 20);
}
</script>
</body>
</html>
在自己的工程中
<td id = "tdFrame" valign="top" width="250" align="left">
<div id ="treeFrame" style="border-bottom: #c3daf9 1px solid; border-left: #c3daf9 1px solid; width: 250px; height: 530px; overflow: auto; border-top: #c3daf9 1px solid; border-right: #c3daf9 1px solid;">
<input type="button" value = "刷 新" οnclick="OnRefesh();">
<input type="button" value = "设 置" οnclick="OnSet();">
<div id="Solutiontree_box"></div>
</div>
</td>
动态改变的方法,在函数中添加如下代码,自己先设置一个函数OnRefresh(),这样就可以看到框的大小改变了,然后再去根据自己的需求,响应鼠标拖动的事件
function OnRefesh(){
//alert ("refresh");
var tdWidth = document.getElementById("tdFrame");
var divtest = document.getElementById("treeFrame");
var width = divtest.offsetWidth-5+"px";
divtest.style.width = width;
tdWidth.style.width = width;
}