scrollWidth、clientWidth、offsetWidth_javascript スキルの違い

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

説明:

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

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

ケース 1:

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

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

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

ケース 2:

要素のコンテンツが表示領域を超えると、スクロール バーが表示され、使用できるようになります。

scrollWidth>clientWidth。

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

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

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

終了

上記は、scrollWidth、clientWidth、offsetWidth のすべての違いです。皆様のお役に立てれば幸いです。