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

starting

浏览: 194498 次
性别:
来自: 深圳

最近访客更多访客>>

dxr19870317

xtfgq

crest868

ws110d

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript IE 浏览器 XHTML 工作

下面的这些参数的解析都是针对于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

分享到：

position:absolute relative 得到一个对 ... | oracle 的函数、存储过程、游标、简单实例

2009-05-07 11:50
浏览 5271
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论