clientWidthとは
- ここで説明するclientWidth とは次の語句からなるjavascriptのプロパティです。
- client
- 読み: クライアント
意味: 得意先、顧客、依頼人 - height
- 読み: ウィズ
意味: 幅
clientWidthプロパティの概要
このプロパティは、要素のパディングボックスとコンテンツボックスの横幅の和をピクセル単位の整数で取得することができます。
コンテンツボックスは内容の状態により、スクロールバーが表示されることがありますが、その場合にはスクロールバーの幅は含まれません。
構文
サンプルを見る前に構文を確認しておきます。
var intElemClientWidth = Element.clientWidth;サンプルコードと実行結果
このサンプルでは、予めdiv要素のコンテンツボックスにCSSで横幅=180px、高さ180pxを設定しています。
このdiv要素のclientWidthプロパティの値を、同要素のコンテンツボックスに出力するようにしています。
このプロパティはパディングボックスとコンテンツボックスの横幅の和を取得するためのプロパティですので スクロールバーが表示されている場合と表示されていない場合では取得する値が違うことに注意してください。
サンプルコード: CSS
<style>
#idDiv{
background-clip: content-box;
background-color: ##steelblue;
border: 10px solid ##red;
color: ##white;
padding: 10px;
height: 180px;
width: 180px;
text-align: center;
}
</style>
- 02: 背景色の領域 (パディングボックスが目視できるようにコンテンツボックスのみに背景色を適用します。)
- 09: 要素の横幅 (コンテンツボックスの横幅を180pxに設定しました。)
サンプルコード: HTML
<body>
<div id="idDiv">padding + content<br></div>
</body>
- 02: div要素 (clientWidthを取得する対象の要素です。)
サンプルコード: script
<script>
let elmDiv = document.getElementById("idDiv");
elmDiv.insertAdjacentText("beforeend", elmDiv.clientWidth + "px");
</script>
- 02: 変数=要素の参照 (識別子にidDivを持つ要素を特定して変数に参照を代入します。)
- 03: 結果の出力 (elmDivの要素のコンテンツに結果を挿入します。)
スクロールバーなし ↓
padding + content
スクロールバーあり ↓
padding + content