clientWidth、clientHeightで要素の幅と高さを取得する【JavaScript】

2019年7月10日

この記事ではclientWidth、clientHeightを使って、要素の幅と高さを取得します。

clientHeight

使い方

element.clientWidth、element.clientHeightという形式で使います。

<div id="target"><span>サンプル</span></div>

#target {
  height: 120px;
  width: 200px;
  background-color: yellow;
}

上記のHTML、CSSを適応したものが下記です。

下記のJavaScriptを実行し、clientWidthとclientHeightを取得します。

var target = document.getElementById('target');
var h = target.clientHeight;
var w = target.clientWidth;
console.log('高さ：' + h +'px');
// => 高さ：120px

console.log('幅：' + w + 'px');
// => 幅：200px

clientWidth、clientHeightは読み取り専用

clientWidth、clientHeightは読み取り専用のため、element.clientHeight = '300px'のように指定しても変更することはできません。

widthやheightの変更には、element.style.width = '300px'のようにstyleを使います。

var target = document.getElementById('target');
var h = target.clientHeight;
var w = target.clientWidth;

// 変更できない
target.clientHeight = '300px';

// 変更できる
target.style.width = '120px';

上記のJavaScriptを適用したのが下記です。

widthは変更できていますが、heightが変更できていないのが分かります。

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。