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

ホームページ

ウェブフロントエンド

CSSチュートリアル

scrollWidth、clientWidth、offsetWidth_Experience交換の違い

May 16, 2016 pm 12:07 PM

offsetwidth

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) に注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。