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:
实例：
- <div style="width:200px;height:200px;background-
- color:#999999;overflow:hidden;border:#666666 solid 2px" id="p">
- <div style="width:200px;height:150px;background-color:#FFFF00;" id="t">如果为p设置了
- scrollTopeeeeeeeeewrfdsfsddf这些,这些内容可能不会完全显示。</div>
- </div>
- <script type="text/javascript">
- var p = document.getElementById("p");
- var t= document.getElementById("t");
- p.scrollLeft =50;
- </script>
divLeft=p.style.Left 表示p在样式中定义的left的值，该例没有定义所以为空
divClientLeft=p.clientLeft 表示p的border的宽度 p.clientLeft=2
divScrollLeft=p.scrollLeft 表示p的最顶端和可见内容的最顶端的距离,则t中的汉字会左边隐藏50px（不对？？）
offsetLeft 实例：
- <script language="javascript">
- function tt(){
- var testObj=document.getElementById("test");
- var toptest=document.getElementById("toptest");
- var test1=document.getElementById("test1");
- }
- </script>
- <body onload="tt()">
- <div id="toptest" style="background-color:red; border:4px solid #FFFF99; position:
- relative; width:100px; height:100px; overflow:auto; left:10px">
- <div id="test" style="position:absolute ; border:#999999 2px solid; height:120;
- width:140px; left:10px"></div>
- </div>
- <div id="test1" style="position:relative ; border:#000000 2px solid; height:200px;
- 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实例：
- <div style="width:200px;height:200px;background-color:#999999;overflow:hidden;" id="p">
- <div style="width:100px;height:300px;background-color:#FFFF00;" id="t">如果为 p 设置了
- scrollTop，这些内容可能不会完全显示。</div>
- </div>
- <script type="text/javascript">
- var p = document.getElementById("p");
- p.scrollTop = 20;
- </script>
divScrollTOp=objDiv.scrollTop 表示div的最顶端和可见内容的最顶端的距离，上实例表明如果设置了外层元素p的scrollTop，那么内层元素的内容会向上“卷起”。
width:
实例代码：
- <div style="width:200px;height:200px;background-color:#999999;overflow:hidden;
- border:#999999 solid 2px" id="p" >
- <div style="width:250px;height:150px;background-color:#FFFF00;" id="t">如果为p设置
- dfdddddddd这些内容可能不会完全显示。</div>
- </div>
- <script type="text/javascript">
- var p = document.getElementById("p");
- var t= document.getElementById("t");
- </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实例:
- <div style="width:200px;height:200px;background-color:#999999;overflow:hidden;
- border:#999999 solid 2px" id="p" >
- <div style="width:100px;height:300px;background-color:#FFFF00;" id="t">如果为p设置
- dfdddddddd这些内容可能不会完全显示。</div>
- </div>
- <script type="text/javascript">
- var p = document.getElementById("p");
- </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