DOM

：

：

HTMLElement.offsetWidth プロパティ

　編集：2022.10.02 by T.A.

[Edge]○。読取専用。→

element のボーダー領域を含む内容の横幅をピクセル数を表す数値で返します。

通常、offsetWidth は、ボーダー、パディング、垂直スクロールバー（レンダリングされている場合）を含む、要素の CSS width のピクセル単位の測定値です。CSSの ::before や ::after などによる擬似要素の幅は含まれません¶。

（例えば、要素またはその祖先のいずれかで style.display を "none" に設定することにより）要素が非表示の場合、0 が返されます。

構文
element.offsetWidth
element HTMLElement。
値

ピクセル数を表す整数値。

例
offsetWidth

以下のCSSが組み込んであります： 


 
HTML：
 
<SPAN id=IdSpan style="border:15px solid red;">SPAN要素</SPAN><BR>
<SPAN id=IdSpan2 class=Test style="border:15px solid red;">SPAN要素</SPAN><BR>
<DIV id=IdDiv style="overflow:scroll; width:100px; height:100px; font-size:20px;
 margin:10px;
 border:15px solid red;
 padding:10px;
">aaaaaaaaaaaaaaaa<BR>
 あ<BR>
 い<BR>
 う<BR>
 え<BR>
 お<BR>
 か<BR>
 き<BR>
 く<BR>
 け<BR>
</DIV>


 

SPAN要素

SPAN要素


aaaaaaaaaaaaaaaa

 あ

 い

 う

 え

 お

 か

 き

 く

 け



 

 
JavaScript：
 
D=IdSpan.offsetWidth; //＝[number]：121
D=IdSpan2.offsetWidth; //＝[number]：141
D=IdDiv.offsetWidth;  //＝[number]：150


 
ボーダーを含む領域のようです。マージンは含まない。
 
::before による内容も含むようです。




インライン要素の状態



 
HTML：
 
<SPAN id=IdSpan style="border:15px solid red;">SPAN要素。テキスト<BR>です。</SPAN><BR>


 
JavaScript：
 
D=IdSpan.offsetWidth; //＝[number]：188


 
最も長いほうのようです。関連→Element.getClientRects()




widthの解釈による違い



 
HTML：
 
<DIV id=IdDiv style="width:100px; border:10px solid red;
  box-sizing:border-box;
">DIV要素</DIV>
<BR>
<DIV id=IdDiv2 style="width:100px; border:10px solid red;
  box-sizing:content-box;
">DIV要素</DIV>


 
JavaScript：
 
D=IdDiv.offsetWidth; //＝[number]：100
D=IdDiv2.offsetWidth; //＝[number]：120


 
解釈が違っても offsetWidth はボーダー領域の幅のようです。









テスト