前言

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

教程文檔：ES6 入門教程

各寬方法區(qū)別

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

以盒子取值區(qū)別

一般來說盒子會有width、offsetWidth、scrollWidth、clientWidth這四個寬取值方法

width

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

offsetWidth

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

scrollWidth

• 定義：JavaScript屬性，表示元素內(nèi)容的總寬度。
• 取值：如果元素內(nèi)容沒有溢出，則scrollWidth等于clientWidth或offsetWidth（取決于是否有邊框和內(nèi)邊距）；如果內(nèi)容溢出，則scrollWidth等于內(nèi)容實際占用的寬度。
• 特點：這個值用于確定元素內(nèi)容的總寬度，即使部分內(nèi)容不可見（因為溢出）。

clientWidth

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

具象展示

如下圖，我們設(shè)置了一個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ù)情況下（不考慮滾動條和邊框?qū)?nèi)邊距和內(nèi)容區(qū)的影響，且內(nèi)容沒有溢出）：

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

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

以屏幕取值區(qū)別

這種取值在反爬檢測中比較常見，下面列出我遇到的檢測點進行講解：

• 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

• 取值方式：這個屬性返回用戶屏幕的整個寬度（以像素為單位），包括所有系統(tǒng)級元素，如任務(wù)欄、窗口邊框等。
• 結(jié)果大小：通常大于或等于window.screen.availWidth，因為它包括了屏幕上的所有區(qū)域。

window.screen.availWidth

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

window.innerWidth

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

window.outerWidth

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

document.body.clientWidth

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

具象展示

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

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

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

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

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

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

總結(jié) 

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

最新評論