Javascript獲取窗口(容器)的大小及位置參數(shù)列舉及簡(jiǎn)要說(shuō)明
更新時(shí)間：2012年12月09日 17:27:54 作者：
Javascript獲取窗口（容器）的大小及位置一系列的東西比較多，容易混淆，在這里列舉及簡(jiǎn)要說(shuō)明下,需要的朋友可以參考下
Javascript獲取窗口（容器）的大小及位置一系列的東西比較多，容易混淆，在這里列舉及簡(jiǎn)要說(shuō)明下：
屬性方法說(shuō)明：
clientX 相對(duì)文檔的水平坐標(biāo);
clientY 相對(duì)文檔的垂直坐標(biāo);
offsetX 相對(duì)容器的水平坐標(biāo);
offsetY 相對(duì)容器的垂直坐標(biāo);
scrollWidth 獲取對(duì)象的滾動(dòng)寬度;
scrollHeight 獲取對(duì)象的滾動(dòng)高度;
scrollLeft 設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離 ;
scrollTop 設(shè)置或獲取位于對(duì)象最頂端和窗口中可見(jiàn)內(nèi)容的最頂端之間的距離 ;
offsetWidth 獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的寬度;
offsetHeight 獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度;
offsetLeft 獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置 ;
offsetTop 獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置.
Javascript獲取屏幕、窗口大小方法：
屏幕分辨率的高：window.screen.height ;
屏幕分辨率的寬：window.screen.width ;
屏幕可用工作區(qū)高度（不包含任務(wù)欄）：window.screen.availHeight ;
屏幕可用工作區(qū)寬度（不包含任務(wù)欄）：window.screen.availWidth;
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘ú话瑵L動(dòng)條和邊框）：document.body.clientWidth ;
網(wǎng)頁(yè)可見(jiàn)區(qū)域高（不包含滾動(dòng)條和邊框）：document.body.clientHeight;
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘ò瑵L動(dòng)條和邊框）：document.body.offsetWidth ;
網(wǎng)頁(yè)可見(jiàn)區(qū)域高（包含滾動(dòng)條和邊框）：document.body.offsetHeight ;
網(wǎng)頁(yè)正文寬：document.body.scrollWidth ;
網(wǎng)頁(yè)正文高：document.body.scrollHeight ;
網(wǎng)頁(yè)被卷去的高：document.body.scrollTop ;
網(wǎng)頁(yè)被卷去的左：document.body.scrollLeft ;
網(wǎng)頁(yè)正文部分上（網(wǎng)頁(yè)正文最左邊距離屏幕左邊緣的距離）：window.screenTop ;
網(wǎng)頁(yè)正文部分左（網(wǎng)頁(yè)正文最上邊距離屏幕上邊緣的距離）：window.screenLeft .
注：有時(shí)會(huì)出現(xiàn)取不到值的情況，是因?yàn)閔tml文件頭部加了文檔類型：
<!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"> ，
此時(shí)把document.body.scrollTop和document.body.scrollLeft改為：document.documentElement.scrollTop 和document.documentElement.scrollLeft即可，document.body.clientWidth和document.body.clientHeight也要改為：document.documentElement.clientWidth和document.documentElement.clientHeight
當(dāng)然還有疏漏或沒(méi)說(shuō)明清楚的地方，大家可以補(bǔ)充、討論或者百度百度，一起進(jìn)步！ye~
屬性方法說(shuō)明：
clientX 相對(duì)文檔的水平坐標(biāo);
clientY 相對(duì)文檔的垂直坐標(biāo);
offsetX 相對(duì)容器的水平坐標(biāo);
offsetY 相對(duì)容器的垂直坐標(biāo);
scrollWidth 獲取對(duì)象的滾動(dòng)寬度;
scrollHeight 獲取對(duì)象的滾動(dòng)高度;
scrollLeft 設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離 ;
scrollTop 設(shè)置或獲取位于對(duì)象最頂端和窗口中可見(jiàn)內(nèi)容的最頂端之間的距離 ;
offsetWidth 獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的寬度;
offsetHeight 獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度;
offsetLeft 獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置 ;
offsetTop 獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置.
Javascript獲取屏幕、窗口大小方法：
屏幕分辨率的高：window.screen.height ;
屏幕分辨率的寬：window.screen.width ;
屏幕可用工作區(qū)高度（不包含任務(wù)欄）：window.screen.availHeight ;
屏幕可用工作區(qū)寬度（不包含任務(wù)欄）：window.screen.availWidth;
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘ú话瑵L動(dòng)條和邊框）：document.body.clientWidth ;
網(wǎng)頁(yè)可見(jiàn)區(qū)域高（不包含滾動(dòng)條和邊框）：document.body.clientHeight;
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘ò瑵L動(dòng)條和邊框）：document.body.offsetWidth ;
網(wǎng)頁(yè)可見(jiàn)區(qū)域高（包含滾動(dòng)條和邊框）：document.body.offsetHeight ;
網(wǎng)頁(yè)正文寬：document.body.scrollWidth ;
網(wǎng)頁(yè)正文高：document.body.scrollHeight ;
網(wǎng)頁(yè)被卷去的高：document.body.scrollTop ;
網(wǎng)頁(yè)被卷去的左：document.body.scrollLeft ;
網(wǎng)頁(yè)正文部分上（網(wǎng)頁(yè)正文最左邊距離屏幕左邊緣的距離）：window.screenTop ;
網(wǎng)頁(yè)正文部分左（網(wǎng)頁(yè)正文最上邊距離屏幕上邊緣的距離）：window.screenLeft .
注：有時(shí)會(huì)出現(xiàn)取不到值的情況，是因?yàn)閔tml文件頭部加了文檔類型：
<!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"> ，
此時(shí)把document.body.scrollTop和document.body.scrollLeft改為：document.documentElement.scrollTop 和document.documentElement.scrollLeft即可，document.body.clientWidth和document.body.clientHeight也要改為：document.documentElement.clientWidth和document.documentElement.clientHeight
當(dāng)然還有疏漏或沒(méi)說(shuō)明清楚的地方，大家可以補(bǔ)充、討論或者百度百度，一起進(jìn)步！ye~
您可能感興趣的文章:
- 使用GSON庫(kù)將Java中的map鍵值對(duì)應(yīng)結(jié)構(gòu)對(duì)象轉(zhuǎn)換為JSON
- Java代碼實(shí)現(xiàn)Map和Object互轉(zhuǎn)及Map和Json互轉(zhuǎn)
- js模仿java的Map集合詳解
- Java中快速把map轉(zhuǎn)成json格式的方法
- JS自定義對(duì)象實(shí)現(xiàn)Java中Map對(duì)象功能的方法
- javascript超過(guò)容器后顯示省略號(hào)效果的方法(兼容一行或者多行)
- JS判斷鼠標(biāo)從什么方向進(jìn)入一個(gè)容器實(shí)例說(shuō)明
- JS 仿Flash動(dòng)畫放大/縮小容器
- 學(xué)習(xí)ExtJS 訪問(wèn)容器對(duì)象
- JavaScript實(shí)現(xiàn)Java中Map容器的方法
相關(guān)文章
關(guān)于JavaScript中string 的replace
在使用JavaScript對(duì)字符串進(jìn)行處理的時(shí)候我們經(jīng)常會(huì)用到replace方法，很簡(jiǎn)單的一個(gè)方法，以前一直不以為意，直到今天看JavaScript語(yǔ)言精粹的時(shí)候讀到了一個(gè)有趣的小例子的時(shí)候，并不是十分理解，了解了一下replace的用法才明白，原來(lái)replace不像想象中的那么簡(jiǎn)單2013-04-04
這篇文章主要介紹了form表單序列化操作，通過(guò)將表單中的鍵值序列化為可提交的字符串，并附上代碼實(shí)例詳細(xì)講解了運(yùn)行之后的結(jié)果,需要的朋友可以參考下2017-08-08
淺談JavaScript函數(shù)的四種存在形態(tài)
下面小編就為大家?guī)?lái)一篇淺談JavaScript函數(shù)的四種存在形態(tài)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
JavaScript中的Object對(duì)象學(xué)習(xí)教程
這篇文章主要介紹了JavaScript中的Object對(duì)象學(xué)習(xí)教程,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2016-05-05
JavaScript進(jìn)階教程(第三課)...2007-04-04
bgsound 背景音樂(lè) 的一些常用方法及特殊用法小結(jié)
以下的文章是好幾年前收集的，已經(jīng)不記得是從哪里復(fù)制的了；但在這里還是對(duì)原創(chuàng)者表示感謝！2010-05-05
這篇文章主要介紹了js面向?qū)ο笾^承的相關(guān)知識(shí)，以及分享了讀者弄明白這個(gè)知識(shí)點(diǎn)的學(xué)習(xí)心得，對(duì)此有需要的朋友參考下吧。2018-02-02
JavaScript字符串對(duì)象charAt方法入門實(shí)例（用于取得指定位置的字符）
這篇文章主要介紹了JavaScript字符串對(duì)象charAt方法入門實(shí)例,charAt方法用于取得指定位置的字符,需要的朋友可以參考下2014-10-10
JavaScript語(yǔ)言對(duì)Unicode字符集的支持詳解
這篇文章主要介紹了JavaScript語(yǔ)言對(duì)Unicode字符集的支持詳解,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了淺談JavaScript this指向以及修改指向，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11