DHTML元素的这些属性是什么意思？(分用光了，不好意思。)

 clientHeight  
 clientLeft
 clientTop  
 clientWidth 
 offsetHeight 
 offsetLeft 
 offsetParent 
 offsetTop
 offsetWidth 特别是这个属性offsetParent ，怎么用？ 特别是元素嵌套的时候。

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
    #test span{cursor:pointer;text-decoration:underline;color:#0000FF;clear:both;width:100%;float:left;margin-top:10px;text-align:center;}
    </style>
    </head>
    <body>
    <div id="test" style="width:400px;height:300px;border:10px solid #F00;margin:100px;">
    <span onclick="alert(this.parentNode.clientHeight)">clientHeight</span>
    <span onclick="alert(this.parentNode.clientLeft)">clientLeft</span>
    <span onclick="alert(this.parentNode.clientTop)">clientTop</span> 
    <span onclick="alert(this.parentNode.clientWidth)">clientWidth</span>
    <span onclick="alert(this.parentNode.offsetHeight)">offsetHeight</span>
    <span onclick="alert(this.parentNode.offsetLeft)">offsetLeft</span>
    <span onclick="alert(this.parentNode.offsetTop)">offsetTop</span>
    <span onclick="alert(this.parentNode.offsetWidth)">offsetWidth</span>
    </div>
    </body>
    </html>
      

  2.   

    慢慢去弹吧，去体会吧，offsetParent 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
    #test span{cursor:pointer;text-decoration:underline;color:#0000FF;clear:both;width:100%;float:left;margin-top:10px;text-align:center;}
    </style>
    </head>
    <body>
    <div id="test" style="width:400px;height:300px;border:10px solid #F00;margin:100px;">
    <span onclick="alert(this.parentNode.clientHeight)">clientHeight</span>
    <span onclick="alert(this.parentNode.clientLeft)">clientLeft</span>
    <span onclick="alert(this.parentNode.clientTop)">clientTop</span> 
    <span onclick="alert(this.parentNode.clientWidth)">clientWidth</span>
    <span onclick="alert(this.parentNode.offsetHeight)">offsetHeight</span>
    <span onclick="alert(this.parentNode.offsetLeft)">offsetLeft</span>
    <span onclick="alert(this.offsetParent.innerHTML)">offsetParent</span>
    <span onclick="alert(this.parentNode.offsetTop)">offsetTop</span>
    <span onclick="alert(this.parentNode.offsetWidth)">offsetWidth</span>
    </div>
    </body>
    </html>