JavaScript中的offsetWidth、clientWidth、scrollWidth等一系列屬性詳解
更新時間：2025年06月05日 08:35:46 作者：小前端大牛馬
在JavaScript編程中,offsetWidth是一種用于獲取元素寬度的屬性,下面這篇文章主要介紹了JavaScript中的offsetWidth、clientWidth、scrollWidth等一系列屬性的相關資料,需要的朋友可以參考下
1. clientWidth 和 clientHeight(靜態(tài)（只讀）)
定義：
clientWidth 和 clientHeight 是元素的 可視區(qū)域寬度 和 高度，包括元素的內邊距（padding），但 不包括邊框、滾動條。
clientWidth = contentWidth + padding-left + padding-right clientHeight = contentHeight + padding-top + padding-bottom
- 應用場景：
用于獲取元素的可視區(qū)域大小，常用于布局調整或判斷內容是否溢出。
2. scrollWidth 和 scrollHeight(靜態(tài)（只讀）)
定義：
scrollWidth 和 scrollHeight 是元素內容的 實際寬度 和 高度，即使內容被截斷，也會返回完整內容的尺寸。
scrollWidth = 內容的實際寬度（包括溢出部分） scrollHeight = 內容的實際高度（包括溢出部分）
應用場景：
- 判斷元素內容是否溢出（例如：
scrollWidth > clientWidth表示水平溢出）。 - 計算滾動條的寬度或高度。
3. offsetWidth 和 offsetHeight(靜態(tài)（只讀）)
定義：
offsetWidth 和 offsetHeight 是元素的 總寬度 和 總高度，包括邊框、內邊距以及滾動條。
offsetWidth = clientWidth + border-left + border-right + 水平滾動條寬度（如果存在） offsetHeight = clientHeight + border-top + border-bottom + 垂直滾動條高度（如果存在）
應用場景：
- 獲取元素的總布局尺寸，常用于計算元素在頁面中的位置或大小。
4.scrollTop、scrollLef
定義
scrollTop：表示元素或文檔的 垂直滾動位置，即滾動容器的頂部到可視區(qū)域頂部的距離。scrollLeft：表示元素或文檔的 水平滾動位置，即滾動容器的左側到可視區(qū)域左側的距離。- 值均為為 非負整數，單位為像素（px）。
- 可讀可寫，可以通過設置它們的值來控制滾動位置。
<div id="container" style="height: 200px; overflow: auto;"> <!-- 內容高度為 500px --> </div> //當滾動到中間時，container.scrollTop ≈ 150px。 //當滾動到底部時，container.scrollTop = container.scrollHeight - container.clientHeight。
5.offsetTop 和 offsetLeft
定義
offsetTop：元素 頂部到其包含塊頂部的距離。offsetLeft：元素 左側到其包含塊左側的距離。- 包含塊是最近的定位祖先元素（
position: relative/absolute/fixed），若沒有則為初始包含塊（body或html）。
div {
position: relative;
margin-top: 20px;
padding: 10px;
border: 5px solid black;
}
//offsetTop = 20px（僅包含 margin-top）。
//元素內容區(qū)域的頂部距離包含塊頂部的總距離為：
//offsetTop（20px） + border-top（5px） + padding-top（10px） = 35px。計算方式
- 值為整數，單位為像素（px）。
- 包含元素的
margin，但 不包含border和padding。
7. clientTop 和 clientLeft
定義
clientTop：元素 頂部邊框（border-top）的寬度。clientTop = border-top-widthclientLeft：元素 左側邊框（border-left）的寬度。clientLeft = border-left-width- 這兩個屬性 僅返回邊框的寬度，與元素的
border-style和border-width直接相關。
計算方式
- 值為整數，單位為像素（px）。
- 僅包含邊框的寬度，不涉及
padding或margin。
8. event.clientX、event.clientY、event.pageX、event.pageY
1. 定義與區(qū)別
clientX 和 clientY
- 定義：
表示鼠標指針相對于 瀏覽器視口（viewport） 的坐標。clientX：水平方向（從視口左側邊緣到鼠標位置的距離）。clientY：垂直方向（從視口頂部邊緣到鼠標位置的距離）。
- 特點：
- 不包含滾動偏移，始終基于當前可視區(qū)域。
- 例如，即使頁面滾動，
clientY的值也不會變化。
pageX 和 pageY
- 定義：
表示鼠標指針相對于 整個文檔（document） 的坐標。pageX：水平方向（從文檔左側邊緣到鼠標位置的距離）。pageY：垂直方向（從文檔頂部邊緣到鼠標位置的距離）。
- 特點：
- 包含滾動偏移，即滾動條的偏移量會反映在坐標中。
- 例如，如果頁面滾動了
100px，pageY的值會比clientY多100px。
9.于 innerWidth 、 innerHeight
定義
innerWidth：返回瀏覽器 視口（viewport）的寬度，即用戶可見區(qū)域的寬度（不包括瀏覽器工具欄和滾動條）。innerHeight：返回瀏覽器 視口（viewport）的高度，即用戶可見區(qū)域的高度（不包括瀏覽器工具欄和滾動條）。
所屬對象
這些屬性屬于 window 對象，且為只讀屬性。
計算方式
- 值為整數，單位為像素（px）。
- 不包含：
- 瀏覽器工具欄（如地址欄、書簽欄）。
- 頁面的滾動條（僅指垂直滾動條對寬度的影響）。
- 包含：
- 用戶可見的頁面內容區(qū)域。
示例
假設瀏覽器窗口尺寸為：
- 寬度：1280px（包括工具欄），但視口寬度為 1200px。
- 高度：720px（包括工具欄），但視口高度為 650px。
則：
console.log(window.innerWidth); // 1200 console.log(window.innerHeight); // 650
與 outerWidth 和 outerHeight 的區(qū)別
outerWidth：包含瀏覽器邊框、工具欄和滾動條的總寬度。（現代瀏覽器中可能與innerWidth值相同，因工具欄常隱藏）outerHeight：包含瀏覽器邊框、工具欄和滾動條的總高度。
10.el.style.left
el.style.left 是 JavaScript 中用于 設置或獲取元素 left 樣式屬性 的屬性。
- 作用：
控制元素 水平方向的位置，即元素左側邊緣距離其 包含塊（containing block） 左側的距離。 - 值的格式：
必須包含單位（如px、%、vw等），例如'100px'或'50%'。 - 所屬對象：
屬于el.style對象，直接操作元素的 行內樣式（<element style="left: ...">）。
使用條件
left 屬性 僅對以下定位模式的元素生效：
position: absoluteposition: relativeposition: fixedposition: sticky
若元素的 position 為 static（默認值），則 left 屬性無效。
// 將元素左側定位到距離包含塊左側 100px 的位置 el.style.left = "100px"; // 使用百分比（例如：左側距離包含塊的 50%） el.style.left = "50%";
- 如果通過 類名或外部樣式表 定義了
left，直接操作el.style.left會覆蓋行內樣式。 - 若需動態(tài)調整優(yōu)先級，可考慮通過
getComputedStyle獲取當前值后再修改。 - 元素的定位是相對于 最近的定位祖先（
position: relative/absolute/fixed/sticky的父元素）。 - 若無定位祖先，則相對于初始包含塊（
<html>或視口）。
總結
到此這篇關于JavaScript中的offsetWidth、clientWidth、scrollWidth等一系列屬性詳解的文章就介紹到這了,更多相關js中offsetWidth、clientWidth、scrollWidth內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
淺談js使用in和hasOwnProperty獲取對象屬性的區(qū)別
下面小編就為大家?guī)硪黄獪\談js使用in和hasOwnProperty獲取對象屬性的區(qū)別。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了JS繼承實現方法及優(yōu)缺點詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
js的繼承方法小結（prototype、call、apply）（推薦）
這篇文章主要介紹了js的繼承方法小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要為大家介紹了javascript跑馬燈抽獎特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
Promise是為了解決回調地獄問題而誕生的,它提供了優(yōu)雅的異步回調解決方案,這篇文章主要介紹了前端JavaScript經典之Promise的相關資料,需要的朋友可以參考下2024-09-09
先看一道JavaScript題目，據說是國內某知名互聯網企業(yè)的JavaScript筆試題，如果對正則的全局匹配模式不了解的話可能會對下面的輸出結果感到疑惑。2011-04-04
這篇文章給大家詳細介紹了JavaScript中的并行處理，一直以來，JavaScript 都并沒有多線程的能力，而單線程在讓開發(fā)者方便的同時，也使它一直不能處理計算量復雜的場景，唯一方法就是讓服務端去做。下來通過這篇文章我們一起來看看詳細介紹。2016-09-09
大家都知道將多維數組（尤其是二維數組）轉化為一維數組是業(yè)務開發(fā)中的常用邏輯，除了使用樸素的循環(huán)轉換以外，我們還可以利用Javascript的語言特性和數據結構的思想實現更為簡潔優(yōu)雅的轉換。下面跟著小編一起來學習學習關于JavaScript如何實現數組降維吧。2017-01-01
通過 JS 獲取頁面相關的尺寸是比較常見的操作,尤其是在動態(tài)計算頁面布局時,今天我們就來學習一下幾個獲取頁面尺寸的基本方法,需要的朋友可以參考下2023-09-09
本文為大家介紹下購物車如何實現選中得到價格，下面有個不錯的示例，大家可以參考下2014-01-01