js中top,left,height,width相关参数的解析和实例

下面的这些参数的解析都是针对于IE浏览器的:

 

得到屏幕中鼠标的坐标,相对于整个页面:
x=event.clientX, y=event.clientY


得到当前窗口的宽度:
w=document.body.clientWidth;
h=document.body.clientHeight; 
在html中,如果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句没有删掉的话,得到的高度是不

正确的。


屏幕可用工作区高度,宽度:
h=window.screen.availHeight;
w=window.screen.availWidth;


屏幕总高度,宽度:
h= window.screen.height;
w= window.screen.width;

 

 

Left:

实例:

Html代码
  1. <div style="width:200px;height:200px;background-   
  2. color:#999999;overflow:hidden;border:#666666 solid 2px" id="p">  
  3.   <div style="width:200px;height:150px;background-color:#FFFF00;" id="t">如果为p设置了    
  4. scrollTopeeeeeeeeewrfdsfsddf这些,这些内容可能不会完全显示。</div>  
  5. </div>  
  6. <script type="text/javascript">  
  7. var p = document.getElementById("p");   
  8. var tdocument.getElementById("t");   
  9. p.scrollLeft =50;   
  10. </script>  

 divLeft=p.style.Left   表示p在样式中定义的left的值,该例没有定义所以为空

 divClientLeft=p.clientLeft  表示p的border的宽度 p.clientLeft=2
 divScrollLeft=p.scrollLeft 表示p的最顶端和可见内容的最顶端的距离,则t中的汉字会左边隐藏50px(不对??)

 

 

offsetLeft 实例:

Html代码
  1. <script language="javascript">  
  2. function tt(){   
  3.     var testObj=document.getElementById("test");   
  4.     var toptest=document.getElementById("toptest");   
  5.     var test1=document.getElementById("test1");   
  6. }   
  7. </script>  
  8. <body onload="tt()">  
  9. <div id="toptest" style="background-color:red; border:4px solid #FFFF99; position:    
  10. relative; width:100px; height:100px; overflow:auto; left:10px">      
  11. <div id="test" style="position:absolute ; border:#999999 2px solid; height:120;    
  12. width:140px; left:10px"></div>  
  13. </div>    
  14. <div id="test1" style="position:relative ; border:#000000 2px solid; height:200px;    
  15. overflow:scroll; " />  

 divOffsetLeft=objDiv.offsetLeft 表示该div相对于父对象的左边的距离 toptest.offsetLeft=20
testObj.offsetLeft=10   test1.offsetLeft=10

 

 

 

 

top:

divTop=objDiv.style.top 表示div在样式中定义的top的值,否则为空
divClientTop=objDiv.clientTop  表示div的border的宽度

divOffsetTop=objDiv.offsetTop 表示该div相对于父对象的高度。

 

scrollTop实例:

Html代码
  1. <div style="width:200px;height:200px;background-color:#999999;overflow:hidden;" id="p">  
  2.   <div style="width:100px;height:300px;background-color:#FFFF00;" id="t">如果为 p 设置了    
  3.   
  4. scrollTop,这些内容可能不会完全显示。</div>  
  5. </div>  
  6. <script type="text/javascript">  
  7. var p = document.getElementById("p");   
  8. p.scrollTop = 20;   
  9. </script>  

 

 divScrollTOp=objDiv.scrollTop 表示div的最顶端和可见内容的最顶端的距离,上实例表明如果设置了外层元素p的scrollTop,那么内层元素的内容会向上“卷起”。

 

 

width:

 

实例代码:

Html代码
  1. <div style="width:200px;height:200px;background-color:#999999;overflow:hidden;    
  2. border:#999999 solid 2px" id="p" >  
  3.   <div style="width:250px;height:150px;background-color:#FFFF00;" id="t">如果为p设置   
  4. dfdddddddd这些内容可能不会完全显示。</div>  
  5. </div>  
  6. <script type="text/javascript">  
  7. var p = document.getElementById("p");   
  8. var tdocument.getElementById("t");   
  9. </script>  

 divWidth=p.style.width 表示div在样式中定义的height的值 200px
divScrollWidth=p.scrollWidth  表示网页内容实际高度。为内层元素的实际高度+外层元素的padding   300
divClientWidth=p.clientWidth 如果为单层 div 则是width-border-滚动条,即div可视区域的高度,

但如果有包含关系,则内层元素高于外层元素,则为原来的高度 200.而t.clientWidth=250。里面没有包含所以就是他本身
divOffsetWidth=p.offsetWidth 结果等于clientHeight+border+滚动条 p.offsetWidth=  204而
t.clientWidth=254

 

 

 

height实例:

 

Html代码
  1. <div style="width:200px;height:200px;background-color:#999999;overflow:hidden;    
  2. border:#999999 solid 2px" id="p" >  
  3.   <div style="width:100px;height:300px;background-color:#FFFF00;" id="t">如果为p设置   
  4. dfdddddddd这些内容可能不会完全显示。</div>  
  5. </div>  
  6. <script type="text/javascript">  
  7. var p = document.getElementById("p");   
  8. </script>  

 divHeight=p.style.height 表示div在样式中定义的height的值 200px
divScrollHeight=p.scrollHeight 表示网页内容实际高度。为内层元素的实际高度+外层元素的padding 300
divClientHeight=p.clientHeight 如果为单层 div 则是height-border-滚动条,即div可视区域的高度

, 但如果有包含关系,则内层元素高于外层元素,则为原来的高度 200
divOffsetHeight=p.offsetHeight 结果等于clientHeight+border+滚动条   204

你可能感兴趣的:(height)