JavaScriptのclientWidthとclientHeight

使用する clientWidth と clientHeight HTML要素のピクセルサイズを取得できます。 寸法は、HTML要素内のコンテンツの寸法とパディングを使用して計算されます。

clientWidthとclientHeightを使用する

<div id="foo">
  Hello World
</div>

const clientWidth = document.querySelector('#foo').clientWidth;
const clientHeight = document.querySelector('#foo').clientHeight;

学習演習

演習として、の値を計算してみてください clientWidth と clientHeight 次のHTML要素の：

/**********************************************
 **  If the HTML element is <div id="foo"/>  **
 **********************************************/
const clientWidth = document.querySelector('div#foo').clientWidth;
const clientHeight = document.querySelector('div#foo').clientHeight;
console.log(clientWidth, clientHeight);
// --> 200, 100

どのように計算されましたか？ HTML要素内のコンテンツにパディングを追加し、余白と境界線を無視します。

(10 + 50) + 140   // clientWidth === 200
(30) + 70         // clientHeight === 100

別のことを試してみましょう！ 計算してみてください clientWidth と clientHeight このHTML要素の：

(10 + 10) + 230   // clientWidth === 250
(30 + 20) + 70    // clientHeight === 120

ノート

• ブロックレベル： clientWidth と clientHeight インラインHTML要素（など）では機能しません span, em、 また a). 戻るだけです 0!
• 丸められた値：値は最も近い整数に丸められます。 より正確な値が必要な場合は、 getBoundingClientRect（）を使用してください
• 読み取り専用：新しい値を割り当ててHTML要素のサイズを変更することはできません。 たとえば、これは何もしません。 someElement.clientWidth = 30

clientWidth と clientHeight すべての主要なデスクトップおよびモバイルブラウザでサポートされています。

clientWidthおよびclientHeightの詳細については、公式のW3C仕様を参照してください。