1. 程式人生 > >scrollWidth、clientWidth、offsetWidth、width的區別

scrollWidth、clientWidth、offsetWidth、width的區別

字符 adding com 樣式表 src 屬性 分享圖片 ext window

scrollWidth:對象的實際內容的寬度,不包邊線寬度,會隨對象中內容超過可視區後而變大。
clientWidth:對象內容的可視區的寬度,不包滾動條等邊線,會隨對象顯示大小的變化而改變。
offsetWidth:對象整體的實際寬度,包滾動條等邊線,會隨對象顯示大小的變化而改變。
innerWidth:
window.innerHeight=瀏覽器窗口的內部高度
window.innerWidth=瀏覽器窗口的內部寬度

例子 textarea

1、元素內無內容或者內容不超過可視區,滾動不出現或不可用的情況下。
scrollWidth=clientWidth,兩者皆為內容可視區的寬度。

offsetWidth為元素的實際寬度。

技術分享圖片

2、元素的內容超過可視區,滾動條出現和可用的情況下。
scrollWidth>clientWidth。
scrollWidth為實際內容的寬度。
clientWidth是內容可視區的寬度。
offsetWidth是元素的實際寬度。

技術分享圖片

3、offsetWidth和width區別
offsetWidth屬性可以返回對象的padding+border+元素width屬性值之和,style.width返回值就是定義的width屬性值。
offsetWidth屬性僅是可讀屬性,而style.width是可讀寫的。
offsetWidth屬性返回值是整數,而style.width的返回值是字符串,並且帶有單位。
4.style.width僅能返回以style方式定義的內部樣式表的width屬性值。 原文地址:https://www.jianshu.com/p/76ba0d71bd7c

scrollWidth、clientWidth、offsetWidth、width的區別