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.availHeight ;
屏幕可用工作區寬度(不包含任務欄):window.screen.availWidth;
網頁可見區域寬(不包含滾動條和邊框):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 .
注:有時會出現取不到值的情況,是因為html文件頭部加了文檔類型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> ,
此時把document.body.scrollTop和document.body.scrollLeft改為:document.documentElement.scrollTop 和document.documentElement.scrollLeft即可,document.body.clientWidth和document.body.clientHeight也要改為:document.documentElement.clientWidth和document.documentElement.clientHeight
當然還有疏漏或沒說明清楚的地方,大家可以補充、討論或者百度百度,一起進步!ye~