當(dāng)前位置：首頁 >

JS 获取浏览器窗口大小

發(fā)布時(shí)間：2025/3/15 53 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS 获取浏览器窗口大小小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

JS 獲取瀏覽器窗口大小

?window對(duì)象：

　　（1）innerHeight屬性：窗口中文檔顯示區(qū)域的高度，不包括菜單欄、工具欄等部分。該屬性可讀可寫。

????　　?IE不支持該屬性，IE中body元素的clientHeight屬性與該屬性相同。

　　（2)innerWidth屬性：窗口中文檔顯示區(qū)域的寬度，同樣不包括邊框。該屬性可讀可寫。

???　　??IE不支持該屬性，IE中body元素的clientWidth屬性與該屬性相同。

???　　??clientHeight與clientWidth屬性是只讀的。

????　　?另外，IE不支持outerWidth、outerHeight屬性。

　　?(3)pageXOffset屬性：整數(shù)只讀屬性，表示文檔向右滾動(dòng)過的像素?cái)?shù)。

??　　???IE不支持該屬性，使用body元素的scrollLeft屬性替代。

　　?(4)pageYOffset屬性：整數(shù)只讀屬性，表示文檔向下滾動(dòng)過的像素?cái)?shù)。

???　　??IE不支持該屬性，使用body元素的scrollTop屬性替代。

documentElement 和 body 相關(guān)說明：

body是DOM對(duì)象里的body子節(jié)點(diǎn)，即 <body> 標(biāo)簽；
　　documentElement 是整個(gè)節(jié)點(diǎn)樹的根節(jié)點(diǎn)root，即<html> 標(biāo)簽；

兼容IE與DOM瀏覽器，如何獲取窗口中文檔顯示區(qū)域的寬度及高度，還可以使用?:條件語句，如下：

　　windows.innerWidth?? windows.innerWidth?: document.body.clientWidth;

　　windows.innerHeight?? windows.innerHeight?: document.body.clientHeight;

document.body.clientWidth 和 document.documentElement.clientWidth 在不同瀏覽器的差異：

　　如果定義了W3C的標(biāo)準(zhǔn)

　　在IE中：
　　　　document.body.clientWidth ==> BODY對(duì)象寬度
　　　　document.body.clientHeight ==> BODY對(duì)象高度
　　　　document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?br /> 　　　　document.documentElement.clientHeight ==> 可見區(qū)域高度
　　在FireFox中：
　　　　document.body.clientWidth ==> BODY對(duì)象寬度
　　　　document.body.clientHeight ==> BODY對(duì)象高度
　　　　document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?br /> 　　　　document.documentElement.clientHeight ==> 可見區(qū)域高度
　　在Opera中：
　　　　document.body.clientWidth ==> 可見區(qū)域?qū)挾?br /> 　　　　document.body.clientHeight ==> 可見區(qū)域高度
　　　　document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）
　　　　document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）

　　而如果沒有定義W3C的標(biāo)準(zhǔn)，則

　　IE為：
　　　　document.documentElement.clientWidth ==> 0
　　　　document.documentElement.clientHeight ==> 0
　　FireFox為：
　　　　document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）
　　Opera為：
　　　　document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）

網(wǎng)頁可見區(qū)域?qū)?#xff1a; document.body.clientWidth;

網(wǎng)頁可見區(qū)域高： document.body.clientHeight;

網(wǎng)頁可見區(qū)域?qū)?#xff1a; document.body.offsetWidth (包括邊線的寬);

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);

網(wǎng)頁正文全文寬： document.body.scrollWidth;

網(wǎng)頁正文全文高： document.body.scrollHeight;

網(wǎng)頁被卷去的高(在垂直方向上滾動(dòng)了多少)： document.body.scrollTop;

網(wǎng)頁被卷去的左(在水平方向上滾動(dòng)了多少)： document.body.scrollLeft;

網(wǎng)頁正文部分上： window.screenTop;

網(wǎng)頁正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的寬： window.screen.width;

屏幕可用工作區(qū)高度： window.screen.availHeight;

屏幕可用工作區(qū)寬度：window.screen.availWidth;

IE：

　　scrollHeight: 獲取對(duì)象的滾動(dòng)高度。

　　scrollLeft:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

　　scrollTop:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

　　scrollWidth:獲取對(duì)象的滾動(dòng)寬度

　　offsetHeight:獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度

　　offsetLeft:獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置

　　offsetTop:獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置

　　event.clientX:相對(duì)文檔的水平座標(biāo)

　　event.clientY:相對(duì)文檔的垂直座標(biāo)

　　event.offsetX:相對(duì)容器的水平坐標(biāo)

　　event.offsetY:相對(duì)容器的垂直坐標(biāo)

　　document.documentElement.scrollTop:垂直方向滾動(dòng)的值

　　event.clientX+document.documentElement.scrollTop:相對(duì)文檔的水平座標(biāo)+垂直方向滾動(dòng)的量

以上主要指IE之中，FireFox差異如下：

　　IE6.0、FF1.06+：

　　clientWidth = width + padding

　　clientHeight = height + padding

　　offsetWidth = width + padding + border

　　offsetHeight = height + padding + border

　　IE5.0/5.5：

　　clientWidth = width - border

　　clientHeight = height - border

　　offsetWidth = width

　　offsetHeight = height

　　(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))

假設(shè) obj 為某個(gè) HTML 控件：

　　obj.offsetTop 指 obj 相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算上側(cè)位置，整型，單位像素。

　　obj.offsetLeft 指 obj 相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置，整型，單位像素。

　　obj.offsetWidth 指 obj 控件自身的絕對(duì)寬度，不包括因 overflow 而未顯示的部分，也就是其實(shí)際占據(jù)的寬度，整型，單位像素。

　　obj.offsetHeight 指 obj 控件自身的絕對(duì)高度，不包括因 overflow 而未顯示的部分，也就是其實(shí)際占據(jù)的高度，整型，單位像素。

　　我們對(duì)前面提到的 offsetParent 作個(gè)說明。

　　offsetParent 獲取定義對(duì)象 offsetTop 和 offsetLeft 屬性的容器對(duì)象的引用。offsetTop 與 offsetParent 很復(fù)雜，不同瀏覽器有不同解釋，浮動(dòng)一下解釋又不同了，所以我們一般只要理解通過二者可以獲得控件在瀏覽器中的絕對(duì)位置即可。

　　以上屬性在 FireFox 中也有效。

　　另外：我們這里所說的是指 HTML 控件的屬性值，并不是 document.body，document.body 的值在不同瀏覽器中有不同解釋（實(shí)際上大多數(shù)環(huán)境是由于對(duì) document.body 解釋不同造成的，并不是由于對(duì) offset 解釋不同造成的）

我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：

　　一、offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。

　　二、offsetTop 只讀，而 style.top 可讀寫。

　　三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。

　　offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。

clientHeight
　　大家對(duì) clientHeight 都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度，一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域，與頁面內(nèi)容無關(guān)。

offsetHeight
　　IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
　　NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。

scrollHeight
　　IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。
　　NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。

簡(jiǎn)單地說，clientHeight 就是透過瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。
　　NS、FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時(shí)，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
　　IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域?clientHeight 滾動(dòng)條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實(shí)際高度。

　　同理：clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。

　　說明：以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 則意義又會(huì)不同，在 XHTML 中這三個(gè)值都是同一個(gè)值，都表示內(nèi)容的實(shí)際高度。新版本的瀏覽器大多支持根據(jù)頁面指定的 DOCTYPE 來啟用不同的解釋器

IE 和 FireFox 全面支持，而 Netscape 8?和 Opera 7.6?不支持 scrollTop、scrollLeft（document.body.scrollTop、document.body.scrollLeft 除外）。

1.clientHeight, clientWidth:
這兩個(gè)屬性大體上顯示了元素內(nèi)容的象素高度和寬度.理論上說這些測(cè)量不考慮任何通過樣式表加入
元素中的頁邊距,邊框等.

2.clientLeft,clientTop:
這兩個(gè)返回的是元素周圍邊框的厚度,如果不指定一個(gè)邊框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop:
如果元素是可以滾動(dòng)的,可以通過這倆個(gè)屬性得到元素在水平和垂直方向上滾動(dòng)了多遠(yuǎn),單位是象素.
對(duì)于不可以滾動(dòng)的元素,這些值總是0.

4.scrollHeight,scrollWidth:
不管有多少對(duì)象在頁面上可見,他們得到的是整體.

5.style.left:
定位元素與包含它的矩形左邊界的偏移量

6.style.pixelLeft:
返回定位元素左邊界偏移量的整數(shù)像素值.因?yàn)閷傩缘姆窍袼刂捣祷氐氖前瑔挝坏淖址?例如,30px. 利用這個(gè)屬性可以單獨(dú)處理以像素為單位的數(shù)值.

7.style:posLetf:
返回定位元素左邊界偏移量的數(shù)量值,不管相應(yīng)的樣式表元素指定什么單位.因?yàn)閷傩缘姆俏恢弥捣祷氐氖前瑔挝坏淖址?例如,1.2em??
??
LEFT:?? 為從左向右移的位置,即掛件距離屏幕左邊緣的距離;
clientLeft?? 返回對(duì)象的offsetLeft屬性值和到當(dāng)前窗口左邊的真實(shí)值之間的距離
offsetLeft?? 返回對(duì)象相對(duì)于父級(jí)對(duì)象的布局或坐標(biāo)的left值，就是以父級(jí)對(duì)象左上角為坐標(biāo)原點(diǎn)，向右和向下為X、Y軸正方向的x坐標(biāo)
pixelLeft?? 設(shè)置或返回對(duì)象相對(duì)于窗口左邊的位置
scrollWidth 是對(duì)象的實(shí)際內(nèi)容的寬，不包邊線寬度，會(huì)隨對(duì)象中內(nèi)容的多少改變（內(nèi)容多了可能會(huì)改變對(duì)象的實(shí)際寬度）。
clientWidth 是對(duì)象可見的寬度，不包滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變。
offsetWidth 是對(duì)象的可見寬度，包滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變

轉(zhuǎn)載于:https://www.cnblogs.com/jiangtengteng/p/5368128.html

總結(jié)

以上是生活随笔為你收集整理的JS 获取浏览器窗口大小的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Docker：尝试篇
下一篇： F2工作流引擎之-纯JS Web在线可拖

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

JS 获取浏览器窗口大小

JS 獲取瀏覽器窗口大小

總結(jié)