clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight是幾個(gè)困惑了好久的元素屬性，趁著有時(shí)間整理一下

1. clientWidth 和 clientHeight?

網(wǎng)頁(yè)中的每個(gè)元素都具有?clientWidth 和 clientHeight 屬性，表示可視區(qū)域的寬高，即元素內(nèi)容加上padding以后的大小，而不包括border值和滾動(dòng)條的大小，

如下圖所示：

示例代碼如下：

HTML代碼：

<div id="demo"><p></p> </div>

CSS代碼：

div{width: 100px;height: 100px;overflow: scroll;border:20px solid #7b7676;padding: 30px;margin: 60px; } p{width: 180px;height: 160px;background: #aac7aa; }

如下圖：

從上圖得出：

clientWidth = 內(nèi)容 + padding 即 83+30*2 = 143

clientHeight =?內(nèi)容 + padding 即 83+30*2 = 143

2.?scrollWidth 、scrollHeight 、scrollLeft、scrollTop

scrollWidth 和 scrollHeight 表示內(nèi)容的完整寬高，包括padding以及沒(méi)有完全顯示出來(lái)的部分，不包括滾動(dòng)條

scrollWidth = padding+包含內(nèi)容的完全寬度

scrollHeight =?padding+包含內(nèi)容的完全高度

scrollLeft和scrollTop都表示滾動(dòng)條滾動(dòng)的部分

如下圖：

依然利用上面的例子：

scrollWidth：160 + 30 = 190

scrollHeight：180 + 30 = 210

至于為什么padding只加30而不是30*2呢，如上圖所示，超出隱藏部分距離父元素邊框是沒(méi)有padding的，所以只加一個(gè)

3. offsetWidth ?和 offsetHeight

? ?如下圖所示：

offsetWidth表示元素本身的寬度，包括滾動(dòng)條和padding，border

offsetHeight表示元素本身的高度，包括滾動(dòng)條和padding，border

所以例子中的offsetWidth = 100 + 20 * 2 + 30 * 2 = 200

? ? ? ? ? ? ? ? ? ? ? ? ? ? offsetHeight = 100 + 20 * 2 + 30 *2 = 200

offsetTop 和 offsetLeft 表示該元素的左上角與父容器（offsetParent對(duì)象）左上角的距離

參考鏈接：http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

by新手小白的記錄

?

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

總結(jié)

以上是生活随笔為你收集整理的clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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