HTML DOM Element clientWidth 属性

定義と使用法

clientWidth 属性は、要素の視覚的な幅を返し、インデントを含みますが、ボーダーやスクロールバー、マージンを含まないピクセルで計算されます。

clientWidth 属性は読み取り専用です。

参照してください：CSS フレームワーク教程

参照してください：

clientHeight 属性

clientTop 属性

clientLeft 属性

offsetHeight 属性

offsetWidth 属性

要素にスクロールバーを追加するには、以下を使用してください： CSS overflow 属性。

インスタンス

例 1

"myDIV" の高さと幅を取得します（インデントを含みます）：

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

自分で試してみる

例 2

例 2：clientHeight/clientWidth と offsetHeight/offsetWidth の違い

スクロールバーがありません：

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

自分で試してみる

スクロールバーがあります：

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

自分で試してみる

文法

element.clientWidth

返り値

タイプ 説明
数値 要素の視覚的な幅（ピクセルで計算）、インデントを含みます。

ブラウザのサポート

すべてのブラウザがサポートしています element.clientWidth：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート