你知道offsetHeight、scrollHeight、clientHeight的區別嗎?

前言

offsetHeight、scrollHeight、clientHeight這三個屬性我們經常在開發中遇到,如果小夥伴們沒有經常使用的話,很容易把這些屬性搞混,比如說什麼窗口高度、元素高度、內容高度等等。當然,現在的前端框架很多時候幫我們封裝瞭這些屬性,但是我們也不能太過依賴框架,底層的原理我們還是需要瞭解的,今天就來理一理這三個屬性分別代表什麼?

1.盒子模型

介紹這三個屬性之前先來瞭解一下CSS盒子模型,因為面試中如果遇到這道題,面試官通常也是想要考察你盒子模型的相關知識。

盒子模型顧名思義就是盒子的意思,盒子裡面可以裝很多東西。比如我們的div就可以比作一個盒子,那麼組成一個完整的盒子主要包括下面幾個部分:

  • width
  • height
  • padding
  • border
  • margin
  • box-sizing(用來區別正常盒模型和怪異盒子模型)

一個盒子大概由上面一些屬性組成,盒子模型又分為瞭正常和模型和怪異和模型。

1.1 正常盒模型

我們借用一張圖就可以很清楚的知道什麼是正常盒模型:

通過上圖可以看出:寬度就是內容的寬度。當我們修改padding或者border屬性時,盒子的總寬度會改變。

1.2 怪異盒子模型

同樣,我們借助一張圖來理解怪異盒子模型:

通過上圖可以看出:盒子的寬度 = 內容寬度 + padding + border。

簡單瞭解瞭CSS中的盒子模型後,我們再來瞭解這三個高度屬性。

2.offsetHeight

簡單總結為一句話:獲取元素的高度,包含padding和border。

需要註意的是,如果我們的盒子是正常盒子,那麼高度隻有內容高度,所以通常我們需要將盒子模型改為怪異盒子模型,使用box-sizing屬性。

代碼如下:

<head>
<style>
.box1 {
width: 100px;
height: 100px;
padding: 20px;
margin: 30px;
border: 5px solid yellow;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
</body>
<script>
const box1 = document.getElementsByClassName("box1")[0];
console.info("盒子1的offsetHeight",box1.offsetHeight)
</script>

赞(0)