Javascript取得視窗(容器)的大小及位置一系列的東西比較多,容易混淆,在這裡列舉及簡要說明下:
屬性方法說明:
clientX 相對文檔的水平座標;
clientY 相對文檔的垂直座標;
offsetX 相對容器的水平座標;
offsetY 相對容器的垂直座標;
scrollWidth 取得物件的捲動寬度;
scrollHeight 取得物件的滾動高度;
scrollLeft 設定或取得位於物件左邊界和視窗中目前可見內容的最左端之間的距離;
scrollTop 設定或取得位於物件最頂端和視窗中可見內容的最頂端之間的距離;
offsetWidth 取得物件相對於版面或由父座標offsetParent 屬性指定的父座標的寬度;
offsetHeight 取得物件相對於版面或由父座標offsetParent 屬性指定的父座標的高度;
offsetLeft 取得物件相對於版面或由offsetParent 屬性指定的父座標的計算左側位置;
offsetTop 取得物件相對於版面或由offsetTop 屬性指定的父座標的計算頂端位置.
Javascript取得螢幕、視窗大小方法:
螢幕解析度的高:window.screen.height ;
螢幕解析度的寬度:window.screen.width ;
螢幕可用工作區高度(不包含工作區寬度(不包含工作列):window.screen.availWidth;
網頁可見區域寬(不包含滾動條和邊框): document.body.clientWidth ;
網頁可見區域高(不包含捲軸和邊框):document.body.clientHeight;
網頁可見區域寬(包含捲軸和邊框):document.body.offsetWidth ;
網頁可見區域高(包含捲軸和邊框):document.body.offsetHeight ;
網頁正文寬:document.body.scrollWidth ;
網頁正文高:document.body.scrollHeight ;
網頁
網頁正文高:document.body.scrollHeight ;
網頁 ;被捲去的高:document.body.scrollTop ;
網頁被捲去的左:document.body.scrollLeft ;
網頁正文部分上(網頁正文最左邊距離螢幕左邊緣的距離):window. screenTop ;
網頁正文部分左(網頁正文最上邊距離螢幕上邊緣的距離):window.screenLeft .
註:有時會出現取不到值的情況,是因為html文件頭部加了文件類型
:
,
此時把document.body.scrollTop和document.body.scrollLeft改為:document.documentElement.scrollTop 和document.body.scrollLeft改為:document.documentElement.scrollTop 和document.documentElement.scrollLeft即可,document.body.clientWidth和document.body.clientHeight也要改為:document.documentElement.clientWidth和document.documentElement.clientHeight
當然還有疏漏或沒說明的地方,大家可以補充、討論或百度百度,一起進步! ye~