この記事では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が変更できていないのが分かります。