前言

這段時(shí)間在研究一個(gè)反爬產(chǎn)品，環(huán)境檢測(cè)用到了很多個(gè)盒子寬高取值方法，如window.outerWidth、window.screen.availWidth，各個(gè)方法取值結(jié)果不大相同，在此記錄下遇到的方法。

教程文檔：ES6 入門教程

各寬方法區(qū)別

這里就講解下各寬度方法的區(qū)別，同樣可以使用與高度方法的理解
寬度方法：outerWidth、width、innerWidth、offsetWidth、scrollWidth、clientWidth、availWidth

以盒子取值區(qū)別

一般來(lái)說(shuō)盒子會(huì)有width、offsetWidth、scrollWidth、clientWidth這四個(gè)寬取值方法

width

• 定義：CSS屬性，用于設(shè)置元素的寬度。
• 取值：取決于CSS樣式中的設(shè)置，可以是像素值（px）、百分比（%）、視口單位（vw）、em、rem等。
• 特點(diǎn)：這是元素寬度的“設(shè)定值”，實(shí)際渲染時(shí)可能受其他CSS屬性（如padding、border、margin）影響。

offsetWidth

• 定義：JavaScript屬性，表示元素的布局寬度，即元素在頁(yè)面上占用的寬度。
• 取值：等于元素的CSS寬度加上左右內(nèi)邊距（padding）和左右邊框（border）的寬度（如果存在滾動(dòng)條且可見(jiàn)，則也包含滾動(dòng)條的寬度）。
• 特點(diǎn)：這是一個(gè)“實(shí)際占用寬度”的值，包括了元素內(nèi)容區(qū)、內(nèi)邊距和邊框的寬度。

scrollWidth

• 定義：JavaScript屬性，表示元素內(nèi)容的總寬度。
• 取值：如果元素內(nèi)容沒(méi)有溢出，則scrollWidth等于clientWidth或offsetWidth（取決于是否有邊框和內(nèi)邊距）；如果內(nèi)容溢出，則scrollWidth等于內(nèi)容實(shí)際占用的寬度。
• 特點(diǎn)：這個(gè)值用于確定元素內(nèi)容的總寬度，即使部分內(nèi)容不可見(jiàn)（因?yàn)橐绯觯?/li>

clientWidth

• 定義：JavaScript屬性，表示元素內(nèi)容區(qū)加上左右內(nèi)邊距的寬度。
• 取值：等于元素的CSS內(nèi)容寬度加上左右內(nèi)邊距的寬度（不包括邊框和滾動(dòng)條的寬度）。
• 特點(diǎn)：這個(gè)值反映了元素可見(jiàn)內(nèi)容的寬度，不考慮邊框和滾動(dòng)條。

具象展示

如下圖，我們?cè)O(shè)置了一個(gè)width=56的按鈕，其邊框（border）=3、內(nèi)邊距（padding）=6和外邊距（margin）=5，那么它的各寬方法取值結(jié)果如下

width：56
offsetWidth：74（width + padding（6*2）+ border（3*2））
scrollWidth：68（width + padding（6*2））
clientWidth：68（width + padding（6*2））

一般取值結(jié)果大小關(guān)系

在大多數(shù)情況下（不考慮滾動(dòng)條和邊框?qū)?nèi)邊距和內(nèi)容區(qū)的影響，且內(nèi)容沒(méi)有溢出）：

• offsetWidth ≥ clientWidth：因?yàn)閛ffsetWidth包括了邊框的寬度（如果有的話），而clientWidth不包括。
• scrollWidth = offsetWidth（或clientWidth，取決于是否有邊框和內(nèi)邊距導(dǎo)致的內(nèi)容溢出）：在沒(méi)有內(nèi)容溢出的情況下，scrollWidth等于元素的布局寬度或可見(jiàn)內(nèi)容寬度。
• width（CSS設(shè)定值）與offsetWidth、clientWidth的關(guān)系取決于具體的CSS樣式和元素布局。如果CSS樣式中只設(shè)置了width，沒(méi)有padding和border，那么width可能等于clientWidth（但不等于offsetWidth，因?yàn)閛ffsetWidth還包括了邊框）。如果設(shè)置了padding和border，則這些值之間會(huì)有差異。

需要注意的是，當(dāng)元素內(nèi)容溢出時(shí)，scrollWidth的值會(huì)大于clientWidth和offsetWidth（如果滾動(dòng)條可見(jiàn)且包含在offsetWidth中，則可能等于offsetWidth）。此外，不同瀏覽器對(duì)邊框、內(nèi)邊距和滾動(dòng)條的處理可能有所不同，因此在實(shí)際開發(fā)中需要注意這些差異。

以屏幕取值區(qū)別

這種取值在反爬檢測(cè)中比較常見(jiàn)，下面列出我遇到的檢測(cè)點(diǎn)進(jìn)行講解：

• window.screen.availWidth，window.screen.availHeight
• window.screen.width，window.screen.availHeight
• window.innerWidth，window.innerHeight
• document.body.clientWidth，document.body.clientHeight
• window.outerWidth，window.outerHeight

window.screen.width

• 取值方式：這個(gè)屬性返回用戶屏幕的整個(gè)寬度（以像素為單位），包括所有系統(tǒng)級(jí)元素，如任務(wù)欄、窗口邊框等。
• 結(jié)果大小：通常大于或等于window.screen.availWidth，因?yàn)樗似聊簧系乃袇^(qū)域。

window.screen.availWidth

• 取值方式：這個(gè)屬性返回用戶屏幕的可用寬度（以像素為單位），即屏幕寬度減去系統(tǒng)級(jí)元素（如任務(wù)欄、窗口邊框）所占用的空間。
• 結(jié)果大小：通常小于或等于window.screen.width，因?yàn)?code>availWidth考慮了屏幕上的不可用區(qū)域。

window.innerWidth

• 取值方式：這個(gè)屬性返回瀏覽器視口（viewport）的內(nèi)部寬度（以像素為單位），即瀏覽器窗口的可見(jiàn)內(nèi)容區(qū)域?qū)挾?，不包括瀏覽器的邊框、滾動(dòng)條、書簽欄等。
• 結(jié)果大小：可能小于window.screen.availWidth（因?yàn)闉g覽器窗口可能不是全屏的，或者因?yàn)榇嬖跒g覽器邊框、書簽欄等），并且可能大于或小于document.body.clientWidth（取決于頁(yè)面的布局和滾動(dòng)情況）。

window.outerWidth

• 取值方式：這個(gè)屬性返回整個(gè)瀏覽器窗口的寬度（以像素為單位），包括窗口的邊框、標(biāo)題欄、滾動(dòng)條等所有組成部分。
• 結(jié)果大小：通常大于window.innerWidth，因?yàn)樗藶g覽器窗口的所有外部元素。

document.body.clientWidth

• 取值方式：這個(gè)屬性返回HTML文檔主體（body）的寬度（以像素為單位），即文檔內(nèi)容區(qū)域的寬度，不包括滾動(dòng)條的寬度（如果存在的話）。注意，這個(gè)值可能會(huì)受到CSS樣式（如邊距、填充、邊框等）的影響。
• 結(jié)果大小：可能小于或等于window.innerWidth（因?yàn)轫?yè)面內(nèi)容可能設(shè)置了邊距、填充或因?yàn)閮?nèi)容寬度本身小于視口寬度），也可能大于window.innerWidth（如果頁(yè)面內(nèi)容超出了視口并產(chǎn)生了水平滾動(dòng)條，但滾動(dòng)條本身不計(jì)入clientWidth）。

具象展示

我的屏幕大小寬度是2560，下圖是在開發(fā)者工具不影響寬度時(shí)它們的取值結(jié)果

當(dāng)把開發(fā)者工具置于向右時(shí)它們的取值結(jié)果

當(dāng)把開發(fā)者工具置于向下同時(shí)縮小瀏覽器窗口時(shí)它們的取值結(jié)果

通過(guò)上面的對(duì)比可以知道，一般情況下window.screen.width和window.screen.availWidth跟屏幕的大小有關(guān)，不會(huì)受到瀏覽器界面狀態(tài)影響；而window.outerWidth、window.innerWidth和document.body.clientWidth則跟瀏覽器界面大小有關(guān)， 會(huì)受到瀏覽器界面狀態(tài)影響。而這個(gè)值差就很容易被檢測(cè)到，畢竟調(diào)試時(shí)一般會(huì)影響瀏覽器界面狀態(tài)。

一般取值結(jié)果大小關(guān)系

• window.screen.width >= window.screen.availWidth（屏幕的整個(gè)寬度通常大于或等于可用寬度）
• window.outerWidth >= window.innerWidth（瀏覽器窗口的外部寬度通常大于或等于內(nèi)部寬度）
• window.screen.availWidth 與 window.innerWidth 之間沒(méi)有固定的關(guān)系，因?yàn)闉g覽器窗口可能不是全屏的，也可能受到操作系統(tǒng)設(shè)置、瀏覽器布局等因素的影響。
• window.innerWidth 與 document.body.clientWidth 之間也沒(méi)有固定的關(guān)系，因?yàn)轫?yè)面的布局和CSS樣式會(huì)影響document.body.clientWidth的值。

總結(jié) 

到此這篇關(guān)于JavaScript中獲取盒子寬高各方法差異的文章就介紹到這了,更多相關(guān)js獲取盒子寬高各方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論