一、偏移量

? 偏移量包括元素在屏幕上占用的所有可見(jiàn)的空間。元素的可見(jiàn)大小由其高度、寬度決定，包括所有內(nèi)邊距、滾動(dòng)條和邊框大小（注意，不包括外邊距）。通過(guò)下列4個(gè)屬性可以取得元素的偏移量。

? offsetHeight：元素在垂直方向上占用的空間大小，以像素計(jì)。包括元素的高度、（可見(jiàn)的）水平滾動(dòng)條的高度、上邊框高度和下邊框高度。

? offsetWidth：元素在水平方向上占用的空間大小，以像素計(jì)。包括元素的寬度、（可見(jiàn)的）水平滾動(dòng)條的寬度、上邊框?qū)挾群拖逻吙驅(qū)挾取?/p>

? offsetLeft：元素的左外邊框至包含元素的左內(nèi)邊框之間的像素距離。

? offsetTop：元素的上外邊框至包含元素的上內(nèi)邊框之間的像素距離。

? 其中，offsetLeft和offsetTop屬性與包含元素有關(guān)，包含元素的引用保存在offsetParent屬性中。

? ??注意：

? 1、所有偏移量屬性都是只讀的，而且每次訪問(wèn)他們都需要重新計(jì)算。

? 2、包含元素指帶有定位元素（相對(duì)定位，絕對(duì)定位，固定定位）的父元素，如果父元素不是定位元素，則繼續(xù)上溯所有祖先元素直到body。

二、客戶區(qū)大小

? 客戶區(qū)大小指的是元素內(nèi)容及其內(nèi)邊距所占據(jù)的空間大小。

? clientWidth：元素內(nèi)容區(qū)寬度加上左右內(nèi)邊距寬度。

? clientHeight：元素內(nèi)容區(qū)高度加上上下內(nèi)邊距高度。

? ??注意：

? 1、滾動(dòng)條占用的空間不計(jì)算在內(nèi)。

? 2、客戶區(qū)大小是只讀的。

三、滾動(dòng)大小

? 滾動(dòng)大小指的是包含滾動(dòng)內(nèi)容的元素的大小。

? scrollHeight：在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總高度。

? scrollWidth：在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總寬度。

? scrollLeft：被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。通過(guò)設(shè)置這個(gè)屬性可以改變?cè)氐臐L動(dòng)位置。

? scrollTop：被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)。通過(guò)設(shè)置這個(gè)屬性可以改變?cè)氐臐L動(dòng)位置。

四、確定元素大小

? getBoundingClientRect()方法返回一個(gè)矩形對(duì)象，包含4個(gè)屬性：left、top、right和bottom。

轉(zhuǎn)載于:https://www.cnblogs.com/xsnow/p/10901607.html

總結(jié)

以上是生活随笔為你收集整理的DOM元素大小的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。