clientWidth = contentWidth + padding-left + padding-right
clientHeight = contentHeight + padding-top + padding-bottom

• 應(yīng)用場(chǎng)景：
  用于獲取元素的可視區(qū)域大小，常用于布局調(diào)整或判斷內(nèi)容是否溢出。 

2. scrollWidth 和 scrollHeight(靜態(tài)（只讀）)

定義：

scrollWidth 和 scrollHeight 是元素內(nèi)容的 實(shí)際寬度 和 高度，即使內(nèi)容被截?cái)?，也?huì)返回完整內(nèi)容的尺寸。

scrollWidth = 內(nèi)容的實(shí)際寬度（包括溢出部分）
scrollHeight = 內(nèi)容的實(shí)際高度（包括溢出部分）

應(yīng)用場(chǎng)景：

• 判斷元素內(nèi)容是否溢出（例如：scrollWidth > clientWidth 表示水平溢出）。
• 計(jì)算滾動(dòng)條的寬度或高度。

3. offsetWidth 和 offsetHeight(靜態(tài)（只讀）)

定義：

offsetWidth 和 offsetHeight 是元素的 總寬度 和 總高度，包括邊框、內(nèi)邊距以及滾動(dòng)條。 

offsetWidth = clientWidth + border-left + border-right + 水平滾動(dòng)條寬度（如果存在）
offsetHeight = clientHeight + border-top + border-bottom + 垂直滾動(dòng)條高度（如果存在）

應(yīng)用場(chǎng)景：

• 獲取元素的總布局尺寸，常用于計(jì)算元素在頁(yè)面中的位置或大小。

4.scrollTop、scrollLef

定義

• scrollTop：表示元素或文檔的 垂直滾動(dòng)位置，即滾動(dòng)容器的頂部到可視區(qū)域頂部的距離。
• scrollLeft：表示元素或文檔的 水平滾動(dòng)位置，即滾動(dòng)容器的左側(cè)到可視區(qū)域左側(cè)的距離。
• 值均為為 非負(fù)整數(shù)，單位為像素（px）。
• 可讀可寫，可以通過(guò)設(shè)置它們的值來(lái)控制滾動(dòng)位置。

<div id="container" style="height: 200px; overflow: auto;">
  <!-- 內(nèi)容高度為 500px -->
</div>
//當(dāng)滾動(dòng)到中間時(shí)，container.scrollTop ≈ 150px。
//當(dāng)滾動(dòng)到底部時(shí)，container.scrollTop = container.scrollHeight - container.clientHeight。

5.offsetTop 和 offsetLeft

定義

• offsetTop：元素 頂部到其包含塊頂部的距離。
• offsetLeft：元素 左側(cè)到其包含塊左側(cè)的距離。
• 包含塊是最近的定位祖先元素（position: relative/absolute/fixed），若沒(méi)有則為初始包含塊（body 或 html）。

div {
  position: relative;
  margin-top: 20px;
  padding: 10px;
  border: 5px solid black;
}
//offsetTop = 20px（僅包含 margin-top）。
//元素內(nèi)容區(qū)域的頂部距離包含塊頂部的總距離為：
//offsetTop（20px） + border-top（5px） + padding-top（10px） = 35px。

計(jì)算方式

• 值為整數(shù)，單位為像素（px）。
• 包含元素的 margin，但 不包含 border 和 padding。 

7. clientTop 和 clientLeft

定義

• clientTop：元素 頂部邊框（border-top）的寬度。clientTop = border-top-width
• clientLeft：元素 左側(cè)邊框（border-left）的寬度。clientLeft = border-left-width
• 這兩個(gè)屬性 僅返回邊框的寬度，與元素的 border-style 和 border-width 直接相關(guān)。

計(jì)算方式

• 值為整數(shù)，單位為像素（px）。
• 僅包含邊框的寬度，不涉及 padding 或 margin。

8. event.clientX、event.clientY、event.pageX、event.pageY 

1. 定義與區(qū)別

clientX 和 clientY

• 定義：
  表示鼠標(biāo)指針相對(duì)于 瀏覽器視口（viewport） 的坐標(biāo)。
  • clientX：水平方向（從視口左側(cè)邊緣到鼠標(biāo)位置的距離）。
  • clientY：垂直方向（從視口頂部邊緣到鼠標(biāo)位置的距離）。
• 特點(diǎn)：
  • 不包含滾動(dòng)偏移，始終基于當(dāng)前可視區(qū)域。
  • 例如，即使頁(yè)面滾動(dòng)，clientY 的值也不會(huì)變化。

pageX 和 pageY

• 定義：
  表示鼠標(biāo)指針相對(duì)于 整個(gè)文檔（document） 的坐標(biāo)。
  • pageX：水平方向（從文檔左側(cè)邊緣到鼠標(biāo)位置的距離）。
  • pageY：垂直方向（從文檔頂部邊緣到鼠標(biāo)位置的距離）。
• 特點(diǎn)：
  • 包含滾動(dòng)偏移，即滾動(dòng)條的偏移量會(huì)反映在坐標(biāo)中。
  • 例如，如果頁(yè)面滾動(dòng)了 100px，pageY 的值會(huì)比 clientY 多 100px。

 9.于 innerWidth 、 innerHeight

定義

• innerWidth：返回瀏覽器 視口（viewport）的寬度，即用戶可見區(qū)域的寬度（不包括瀏覽器工具欄和滾動(dòng)條）。

• innerHeight：返回瀏覽器 視口（viewport）的高度，即用戶可見區(qū)域的高度（不包括瀏覽器工具欄和滾動(dòng)條）。 

所屬對(duì)象

這些屬性屬于 window 對(duì)象，且為只讀屬性。

計(jì)算方式

• 值為整數(shù)，單位為像素（px）。
• 不包含：
  • 瀏覽器工具欄（如地址欄、書簽欄）。
  • 頁(yè)面的滾動(dòng)條（僅指垂直滾動(dòng)條對(duì)寬度的影響）。
• 包含：
  • 用戶可見的頁(yè)面內(nèi)容區(qū)域。

示例

假設(shè)瀏覽器窗口尺寸為：

• 寬度：1280px（包括工具欄），但視口寬度為 1200px。
• 高度：720px（包括工具欄），但視口高度為 650px。

則：

console.log(window.innerWidth); // 1200  
console.log(window.innerHeight); // 650  

 與 outerWidth 和 outerHeight 的區(qū)別

• outerWidth：包含瀏覽器邊框、工具欄和滾動(dòng)條的總寬度。（現(xiàn)代瀏覽器中可能與 innerWidth 值相同，因工具欄常隱藏）
• outerHeight：包含瀏覽器邊框、工具欄和滾動(dòng)條的總高度。

10.el.style.left  

el.style.left 是 JavaScript 中用于 設(shè)置或獲取元素 left 樣式屬性 的屬性。

• 作用：
  控制元素 水平方向的位置，即元素左側(cè)邊緣距離其 包含塊（containing block） 左側(cè)的距離。
• 值的格式：
  必須包含單位（如 px、%、vw 等），例如 '100px' 或 '50%'。
• 所屬對(duì)象：
  屬于 el.style 對(duì)象，直接操作元素的 行內(nèi)樣式（<element style="left: ...">）。 

使用條件

left 屬性 僅對(duì)以下定位模式的元素生效：

• position: absolute
• position: relative
• position: fixed
• position: sticky

若元素的 position 為 static（默認(rèn)值），則 left 屬性無(wú)效。

// 將元素左側(cè)定位到距離包含塊左側(cè) 100px 的位置
el.style.left = "100px"; 

// 使用百分比（例如：左側(cè)距離包含塊的 50%）
el.style.left = "50%";

• 如果通過(guò) 類名或外部樣式表 定義了 left，直接操作 el.style.left 會(huì)覆蓋行內(nèi)樣式。
• 若需動(dòng)態(tài)調(diào)整優(yōu)先級(jí)，可考慮通過(guò) getComputedStyle 獲取當(dāng)前值后再修改。 
• 元素的定位是相對(duì)于 最近的定位祖先（position: relative/absolute/fixed/sticky 的父元素）。
• 若無(wú)定位祖先，則相對(duì)于初始包含塊（<html> 或視口）。 

總結(jié) 

到此這篇關(guān)于JavaScript中的offsetWidth、clientWidth、scrollWidth等一系列屬性詳解的文章就介紹到這了,更多相關(guān)js中offsetWidth、clientWidth、scrollWidth內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！