动态属性

 动态属性。该特性不但允许您将属性定义为
常量，而且可以定义为表达式，该表达式可以是变量、函数或者是别的元素的属性值。将属
性值设为关于别的元素属性的一个函数的这中能力使得网页设计着在设计WEB页面使有着独
特的灵活性。现在您可以使用动态属性来建立给人印象深刻的精巧的WEB页面了.

比如说，让一个div始终居中显示，不受窗体大小的影响。

oDiv.style.setExpression("left","document.body.clientWidth/2 - oDiv.offsetWidth/2");
oDiv.style.setExpression("top", "document.body.clientHeight/2 - oDiv.offsetHeight/2");

 

<SCRIPT>
window.οnlοad=fnInit;
var iOffset=10;
function fnInit(){
 oDiv.setAttribute("moving",false);
 oDiv.style.left=document.body.clientWidth/2 - oDiv.offsetWidth/2;
 oDiv.style.top=oOffset.offsetTop  + oOffset.offsetHeight + iOffset + oBlock4.offsetHeight + 10;
 
 oBlock1.style.setExpression("top","oDiv.offsetTop - iOffset - oBlock1.offsetHeight");
 oBlock1.style.setExpression("left","oDiv.offsetLeft + (oDiv.offsetWidth/2 - oBlock1.offsetWidth/2)"); 
 oBlock2.style.setExpression("top","oDiv.offsetTop + oDiv.offsetHeight +  iOffset");
 oBlock2.style.setExpression("left","oDiv.offsetLeft + (oDiv.offsetWidth/2 - oBlock2.offsetWidth/2)"); 
 oBlock3.style.setExpression("top","oDiv.offsetTop + (oDiv.offsetHeight/2 - oBlock3.offsetHeight/2)");
 oBlock3.style.setExpression("left","oDiv.offsetLeft - iOffset - oBlock3.offsetWidth"); 
 oBlock4.style.setExpression("top","oDiv.offsetTop + (oDiv.offsetHeight/2 - oBlock4.offsetHeight/2)");
 oBlock4.style.setExpression("left","oDiv.offsetLeft + oDiv.offsetWidth + iOffset"); 
 
}
function fnStartMove(){
  oDiv.adjustX=event.clientX - oDiv.offsetLeft;
  oDiv.adjustY=event.clientY - oDiv.offsetTop;
  oDiv.moving=true;
}
function fnStopMove(){
  oDiv.moving=false;
}
function fnMove(){
 if(oDiv.moving==true){
  if(event.clientX - oDiv.adjustX>0){
   oDiv.style.left=event.clientX - oDiv.adjustX;
  }

  if(event.clientY - oDiv.adjustY>0){
   oDiv.style.top=event.clientY - oDiv.adjustY;
  }
 }
}
function fnUpdate(){
 iOffset=parseInt(oOffset.value);
}
</SCRIPT>