scrollWidth、clientWidth、offsetWidth_Experience交換の違い-CSSチュートリアル-php.cn

scrollWidth、clientWidth、offsetWidth_Experience交換の違い

PHP中文网

リリース： 2016-05-16 12:07:35

オリジナル

1698 人が閲覧しました

scrollwidth、clientwidth、offsetwidth_experience 交換の違い

scrollwidth
オブジェクトの実際のコンテンツの幅であり、エッジの幅は含まれません。オブジェクトのコンテンツによって変化します。どの程度変化するか(コンテンツが多すぎると、オブジェクトの実際の幅が変化する可能性があります)。
clientwidth
スクロールバーやその他の端を除いたオブジェクトの表示幅であり、ウィンドウの表示サイズによって変化します。
offsetwidth
スクロールバーやその他の端を含むオブジェクトの表示幅であり、ウィンドウの表示サイズによって変化します。

scrollwidth と clientwidth の例:

<html>  
<head>  
<title>77.htm文件</title>  
</head>  
<body>  
<textarea wrap="off" onfocus="alert('scrollwidth:'+this.scrollwidth+'\n clientwidth:'+this.clientwidth);">
</textarea>  
</body>  
</html>

ログイン後にコピー

テキストボックスに内容を入力します。水平スクロールバーが表示されない場合、scrollwidth と clientwidth の値はclientwidth は同じです。コンテンツ行がテキストボックスの幅を超えると、水平スクロールバーが表示され、scrollwidth の値が変化します。
scrollwidth は、オブジェクトの実際のコンテンツの幅です。
clientwidth はオブジェクトから見える幅 (エッジを除く) であり、この例では変更されません。

clientwidth と offsetwidth の例:

<html>  
<head>  
<title>77.htm文件</title>  
</head>  
<body>  
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);">
</textarea>  
</body>  
</html>

ログイン後にコピー

offsetwidth の値は、常に clientwidth の値より大きくなります。
clientwidth はオブジェクトから見える幅です（エッジを除く）。
offsetwidth はオブジェクトから見える幅です（スクロールバーが占める幅などのエッジを含みます）。

上記は、scrollwidth、clientwidth、offsetwidth の違い_エクスペリエンス交換の内容です。その他の関連コンテンツについては、php 中国語 web サイト (www.php.cn) に注目してください。