公告版位

本文將透過圖解的方式說明CSSOM View Model中Element定義的屬性,包含clientLeft、clientTop、clientWidth和clientHeight。

JavaScript中可以由Element的DOM物件中使用clientLeft、clientTop、clientWidth和clientHeight的屬性,這些屬性的意義可以用下面這張圖說明:

box  

clientWidth

唯讀。表示Element實際上可視的區塊寬度,也可以用數學表示:

clientWidth = width + padding - 卷軸寬度

clientHeight

唯讀。表示Element實際上可視的區塊寬度,也可以用數學表示:

clientHeight = height + padding - 卷軸高度

clientLeft

唯讀。由上圖可知表示可視區左邊界與border左邊界的距離,基本上相當於左邊border的寬度;當左邊有卷軸的時候(書寫方向由右至左時可能會出現),則還要加上卷軸寬度。用數學表示:

由左至右

clientLeft = borderLeftWidth

由右至左

clientLeft = borderLeftWidth + 卷軸寬度

clientTop

唯讀。由上圖可知表示可視區上邊界與border上邊界的距離,基本上相當於上方border的寬度。用數學表示: 

clientTop = borderTopWidth

延伸閱讀

圖解scrollLeft, scrollTop, scrollWidth, scrollHeight和scrollIntoView

圖解offsetLeft、offsetTop、offsetWidth和offsetHeight

文章標籤
創作者介紹

小殘的程式光廊

emn178 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • Eweng
  • Great explanation!
找更多相關文章與討論