关于对象的offsetWidht和offsetHeight

<! 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"   />
< title > 无标题文档 </ title >
< script  type ="text/javascript" > ...

    function $(id)
    ...{
    return document.getElementById(id);
    }
    function sImgd()
    ...{
        $("ximg").src= $("setimg").options[$("setimg").selectedIndex].value;
    }
    function getW()
    ...{
    
        $("imgWidth").value =  $("getValue").value;
        $("imgHeight").value = $("getValue").value* $("ximg").offsetHeight/$("ximg").offsetWidth;
        $("ximg").width = $("imgWidth").value;
        $("ximg").height = $("imgHeight").value;
    }
</ script >
</ head >

< body >
< select  id ="setimg"  onchange ="sImgd()" >
< option > 选择 </ option >  
< option  value ='http://www.doulaicha.com/images/logo1.jpg' > pic1  </ option >  
< option  value ='http://www.doulaicha.com/images/logo1.jpg' > pic2  </ option >  
< option  value ='http://www.doulaicha.com/images/logo1.jpg' > pic3  </ option >  
< option  value ='http://www.yibahuo.net.cn/images/logo1.jpg' > pic4  </ option >  
< option  value ='http://www.yibahuo.net.cn/images/logo1.jpg' > pic5  </ option >  
</ select >  

< input  type =text  size =5  name ='getValue'  id ="getValue" >   < input  type =submit  value ='设宽'  name ='theW'  onclick ="getW()" >  

< input  type =text  name =imgWidth  id ="imgWidth" >    < input  type =text  name =imgHeight  id ="imgHeight" >
< a  href ="http://www.doulaicha.com" >< img  id ="ximg"  src =""   /></ a >
</ body >
</ html >

 

上面这个例子就是用offsetWidth和offsetHeight取得对象的宽和高。

offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。

offsetHeight:获取对象相对于版面或由父坐标