JS獲取瀏覽器可視區域的尺寸

 所謂可視區域是指能看得見的區域,即在瀏覽器中能看到頁面的區域(高度與寬度)。剛剛使用 document.body.clientHeight 來獲取可視區域的高度獲得的倒是整個文檔的高度,而後在cnblogs.com的一篇文章中獲知須要經過 document.documentElement.clientHeight 才能獲取到瀏覽器的可視區域的高度,順便將該文章摘下來,以下:javascript

在沒有聲明DOCTYPE的IE中,瀏覽器顯示窗口大小隻能如下獲取:java

1
2
document.body.offsetWidth
document.body.offsetHeight

        在聲明瞭DOCTYPE的瀏覽器中,能夠用如下來獲取瀏覽器顯示窗口大小:瀏覽器

1
2
document.documentElement.clientWidth
document.documentElement.clientHeight

        IE,FF,Safari皆支持該方法,opera雖支持該屬性,可是返回的是頁面尺寸;spa

        同時,除了IE之外的全部瀏覽器都將此信息保存在window對象中,能夠用如下獲取:指針

1
2
window.innerWidth
window.innerHeight

網頁可見區域寬: 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;

clientX 設置或獲取鼠標指針位置相對於窗口客戶區域的 x 座標,其中客戶區域不包括窗口自身的控件和滾動條。
clientY 設置或獲取鼠標指針位置相對於窗口客戶區域的 y 座標,其中客戶區域不包括窗口自身的控件和滾動條。
offsetX 設置或獲取鼠標指針位置相對於觸發事件的對象的 x 座標。
offsetY 設置或獲取鼠標指針位置相對於觸發事件的對象的 y 座標。
screenX 設置或獲取獲取鼠標指針位置相對於用戶屏幕的 x 座標。
screenY 設置或獲取鼠標指針位置相對於用戶屏幕的 y 座標。
x 設置或獲取鼠標指針位置相對於父文檔的 x 像素座標。
y 設置或獲取鼠標指針位置相對於父文檔的 y 像素座標。
相關文章
相關標籤/搜索