理解描述頁面元素大小的幾種方式
我們經常可以看到關於描述頁面元素大小的屬性，比如：offsetWidth、clientWidth以及scrollWidth等等。但是，要正確區分它們可能就不是一件容易的事情了。本篇博文，我將通過例子細致地向大家介紹這幾種描述頁面元素大小的屬性。閱讀目錄如下，大家可以根據需要閱讀相應的部分：
- 偏移量
- 客戶區大小
- 滾動大小
第一部分：偏移量
偏移量,它包括元素在屏幕上占用的所有可見的空間。這裏所說的可見的空間是指內容區域、內邊距、邊框。註意：由於外邊距的作用僅僅是為了使不同的元素之間產生一定的距離，它是不可見的，所以偏移量是不包括外邊距的。
1.offsetHeight:即元素在垂直方向上占用的空間大小，以像素計。它包括元素的高度height、上下padding、上下border以及可見的水平滾動條的高度（實際上這個滾動條高度是不需要計算的，因為滾動條會占據padding和content的位置，而不會增加高度）。
觀察以下代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div{width: 200px;height: 200px;
padding-top: 10px;padding-bottom: 10px;
border: 20px red solid;background: green;
overflow:scroll;
}
</style>
</head>
<body>
<div id="div" ></div> <script>
var div=document.getElementById("div");
console.log(div.offsetHeight);
</script>
</body>
</html>
|
這時在chrome瀏覽器中出現的圖為：
控制臺中顯示offsetHeight的值為260。由上面的css代碼可知：
offsetHeight
=border-top+padding-top+height+padding-bottom+border-bottom
=20px+10px+200px+10px+20px
=260px
而我在css代碼中通過加入overflow:scroll;將滾動條顯示出來，發現它只是占據了padding和content的位置，並不會影響offsetHeight的高度，這一點值得註意。
2.offsetWidth: 即元素在水平方向上占用的空間大小，以像素計。元素的寬度width、左右padding、左右border以及可見的豎直滾動條的寬度（實際上和height類似，這個滾動條寬度是不需要計算的，因為滾動條會占據padding和content的位置，而不會增加高度）。
借用講解offsetHeight的代碼，顯然：
offsetWidth
=border-left+padding-left+width+padding-right+border-right
=20px+0px+200px+0px+20px
=240px
在控制臺中輸入console.log(div.offsetWidth);同樣得到了240px。
3.offsetLeft:即元素的左外邊框到包含元素的左內邊框之間的像素距離。
話不多說，我們通過下面的代碼予以驗證：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#div{width: 200px;height: 200px;
padding-top: 10px;padding-bottom: 10px;
border: 20px red solid;background: green;
overflow:scroll;
}
</style>
</head>
<body>
<div id="div" ></div>
<script>
var div=document.getElementById("div");
console.log(div.offsetLeft);
console.log(div.offsetTop);
</script>
</body>
</html>
|
效果圖如下：
即該div是緊貼著瀏覽器可視頁面的邊緣的。定義為左外邊框到包含元素的左內邊框為offsetLeft，而因為margin-left為0，包含元素為body，所以最終得到的0也就不難理解了。
但是，如果包含元素不是body元素呢？下面，讓我們一探究竟。
第二部分： clientWidth
clientWidth 僅僅是width加上padding的大小，是不包括border和margin的。
因為clientWidth即客戶端的寬度，也就是專門服務於客戶的，所以不包括border。
第三部分： scrollWidth
scrollWidth是實際內容的寬度，如下；
可以看到，其中 scrollWidth是真正的內容的寬度，包括不可見的。（不含border）
而 clientWidth 是客戶可以看見的， 且同樣不包括border。
而offsetWidth 是加上border，而不含margin的。
理解描述頁面元素大小的幾種方式