DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> Javascript獲取窗口(容器)的大小及位置參數列舉及簡要說明
Javascript獲取窗口(容器)的大小及位置參數列舉及簡要說明
編輯:JavaScript基礎知識     
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~
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved