首页 > 技术文章 > javascript的offset、client、scroll、screen使用方法

kinblog 2019-05-01 16:37 原文

1.offset

offsetTop 指元素距离上方或上层控件的位置,整型,单位像素。 
offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素。 
offsetWidth 指元素控件自身的宽度,整型,单位像素。 
offsetHeight 指元素控件自身的高度,整型,单位像素。

网页可见区域宽:document.body.offsetWidth (包括边线的宽) 
网页可见区域高:document.body.offsetHeight (包括边线的宽)

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

“上方或上层”与“左方或上层”控件作个说明:

<p id="tool"> 

<input type="button" value="提交"> 

<input type="button" value="重置"> 

</p>

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。 
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。 
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。 
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。

offsetParent (当前对象的上级层对象. ):
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题. 
利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置. 
得到绝对位置脚本代码

function GetPosition(obj) { 
  var left = 0; 
  var top = 0; 
  while(obj != document.body) { 
    left = obj.offsetLeft; 
    top = obj.offsetTop; 
    obj = obj.offsetParent; 
  } 
  alert("Left Is : " + left + "\r\n" + "Top Is : " + top); 
}

2.client

内容可视区域宽:document.body.clientWidth 
内容可视区域高:document.body.clientHeight

四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

client事件发生时鼠标指针的坐标 例:

<html>
<head>
<script type="text/javascript">
function show_coords(event)
  {
  x=event.clientX
  y=event.clientY
  alert("X coords: " + x + ", Y coords: " + y)
  }
</script>
</head>

<body onmousedown="show_coords(event)">
    
    <p>Click in the document. An alert box will alert 
the x and y coordinates of the mouse pointer.</p>

</body>
</html>

 

3.scroll

网页正文全文宽:document.body.scrollWidth 
网页正文全文高:document.body.scrollHeight 
网页被卷去的高:document.body.scrollTop 
网页被卷去的左:document.body.scrollLeft

IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。 
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

scrollTop 是“卷”起来的高度值,示例: 

<p class="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p"> 
<p class="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</p> 
</p> 
<script type="text/javascript"> 
var p = document.getElementById("p"); 
p.scrollTop = 10; 
</script> 

由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷。 
scrollLeft 也是类似道理。

4.screen

网页正文部分上:window.screenTop 
网页正文部分左:window.screenLeft 
屏幕分辨率的高:window.screen.height 
屏幕分辨率的宽:window.screen.width 
屏幕可用工作区高度:window.screen.availHeight 
屏幕可用工作区宽度:window.screen.availWidth

 

推荐阅读