使用JavaScript实现动态改变控件大小

1、需要在Html页面中加入一个层

<div onmousedown="ChangeSizeCtrl()" id="layer1" style="POSITION: absolute"></div>

2、在控件的click事件中，加入一个函数SelectCtrl(this)

3、在SelectCtrl(this)函数中，改变layer1层的样式，把层的大小设置为比控件大小稍微大一点

 function SelectCtrl(e)

 {

document.getElementById("layer1").style.top = e.offsetTop-2;

document.getElementById("layer1").style.left = e.offsetLeft-2;

document.getElementById("layer1").style.width = parseInt(e.style.width)+4;

document.getElementById("layer1").style.height = parseInt(e.style.height)+4;

document.getElementById("layer1").style.cursor = "e-resize"; 

 }

4、在Html代码中加入以下JavaScript代码

<script language="javascript" type="text/javascript">
 var changeSize = false;
 var x,y,z;
 
 function change()
 {
  if(event.button == 1 && temp + event.clientX - x > 0)
  {
   document.getElementById(top.sPubSelCtrlID).style.width = temp + event.clientX - x;
  }
 }
 
 function ChangeSizeCtrl()
 {
  if(event.srcElement.style.cursor == "e-resize")
  {
   changeSize = true;
   z = event.srcElement;
   x = event.clientX;
   temp = parseInt(document.getElementById(top.sPubSelCtrlID).style.width);
   document.onmousemove = change;
  }
 }
 document.onmouseup=new Function("changeSize = false");
 </script>