首頁 > web前端 > js教程 > 關於js取得網頁高度及常規邊距計算使用方法詳解

關於js取得網頁高度及常規邊距計算使用方法詳解

伊谢尔伦
發布: 2017-06-16 10:13:51
原創
1294 人瀏覽過

js或jquery怎麼取得網頁的常見的高度或寬度的呢,小編總結了一下,一起看看吧。

關於js取得網頁高度及常規邊距計算使用方法詳解

#網頁可見區域寬: document.body.clientWidth;
網頁可見區域高: document.body.clientHeight;
網頁可見區域寬:document.body.offsetWidth    (包括邊線的寬);
網頁可見區域高: document.body.offsetHeight   (包括邊線的寬度);
網頁內文全文寬: document.body.scrollWidth;
#網頁正文全文高: document.body.scrollHeight;
網頁被捲去的高: document.body.scrollTop;
##網頁被捲去的左: document.body.scrollLeft;
網頁正文部分上: window.screenTop;
網頁正文部分左: window.screenLeft;
# #螢幕解析度的高: window.screen.height;
螢幕解析度的寬度: window.screen.width;
螢幕可用工作區高度: window .screen.availHeight;
螢幕可用工作區寬度:window.screen.availWidth;


scrollHeight: 取得物件的捲動高度。
scrollLeft:設定或取得位於物件左邊界和視窗中目前可見內容的最左端之間的距離
scrollTop:設定或取得位於物件最頂端和視窗中可見內容的最頂端之間的距離
scrollWidth:取得物件的捲動寬度
offsetHeight:取得物件相對於版面或由父座標offsetParent 屬性指定的父座標的高度
offsetLeft:取得物件相對於版面或由offsetParent 屬性指定的父座標的計算左側位置
offsetTop:取得物件相對於版面或由offsetTop 屬性指定的父座標的計算頂端位置  
event.clientX 相對文件的水平座標
event.clientY 相對文件的垂直座標

event.offsetX 相對容器的水平座標
event.offsetY 相對容器的垂直座標  
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文件的水平座標+垂直方向滾動的量
##Post by molong on 2009-05 -19 11:57 PM   #1

要取得目前頁面的捲軸縱座標位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 對應的是html 標籤,而body 對應的是body 標籤。

在標準w3c下,document.body.scrollTop恆為0,需要用document.documentElement.scrollTop來取代;
#如果你想定位滑鼠相對於頁面的絕對位置時,你會發現google裡面1000篇文章裡面有999.99篇會讓你使用event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop, 如果你發現你的滑鼠定位偏離了你的想像,請不要奇怪,這是再正常不過的事。
ie5.5之後已經不支援document.body.scrollX物件了。 所以在程式設計的時候,請加上這樣的判斷

if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;    
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}
登入後複製



#

以上是關於js取得網頁高度及常規邊距計算使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板