javascript的offset、client、scroll、screen使用方法


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

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com