Web フロントエンドの学習メモ -scrollWidth、clientWidth、offsetWidth の違い_html/css_WEB-ITnose

これら 3 つの属性の違いをデモでテストします。

説明:

scrollWidth: エッジの幅を除いたオブジェクトの実際のコンテンツの幅は、オブジェクト内のコンテンツが表示領域を超えると増加します。
clientWidth: スクロール バーやその他の端を除く、オブジェクト コンテンツの視覚領域の幅は、オブジェクトの表示サイズが変化すると変化します。
offsetWidth: スクロール バーやその他の端を含むオブジェクト全体の実際の幅は、オブジェクトの表示サイズが変化すると変化します。

このデモでは、ページに textarea 要素を配置し、デフォルトの幅と高さで表示します。

ケース 1:

要素にコンテンツがないか、コンテンツが表示領域を超えず、スクロールが表示されないか、使用できません。

scrollWidth=clientWidth、どちらもコンテンツの表示領域の幅です。

offsetWidth は要素の実際の幅です。

ケース 2:

要素のコンテンツが表示領域を超えており、スクロール バーが表示され、使用可能になります。

scrollWidth>clientWidth。

scrollWidth は実際のコンテンツの幅です。

clientWidth はコンテンツ表示領域の幅です。

offsetWidth は要素の実際の幅です。

以上。