JavaScript | HTML要素の大きさを比較する方法

2021-02-022021-06-28JavaScript 数値・計算,JavaScript

JavaScriptで要素の幅と高さから計算したpx単位の面積から、2つのHTML要素の大きさを比較するサンプルコードです。

See the Pen JavaScript | Calculate the area of the element by yochans (@yochans) on CodePen.

HTML要素の大きさを比較する

要素のの幅と高さから面積（px）を計算、2つのHTML要素のサイズを比較サンプルコードです。

HTMLにはid「target1」「target2」という要素を用意しています。

<div id="taget1"></div>
<div id="taget2"></div>

CSSにて幅と高さを指定、動作サンプル用にpaddingも指定している為、実際のサイズは指定した幅と高さより大きくなります。

#taget1 {
	width: 100px;
	height: 100px;
	margin: 10px;
	padding: 5px;
	background: #8b4513;
	color: #FFF;
	font-size: 24px;
}

#taget2 {
	width: 120px;
	height: 100px;
	margin: 10px;
	padding: 5px;
	background: #8b4513;
	color: #FFF;
	font-size: 24px;
}

let target1 = document.querySelector('#taget1');
let target2 = document.querySelector('#taget2');

let target1_size = target1.offsetWidth * target1.offsetHeight;
let target2_size = target2.offsetWidth * target2.offsetHeight;

if(target1_size == target2_size){
	//2つの要素の大きさは等しい
}else if(target1_size > target2_size){
	//target1はtarget2より大きい
}else{
	//target1はtarget2より小さい
}

要素の幅をoffsetWidth、高さをoffsetHeightで取得し、単純に四角形の面積、幅×高さを計算。

offsetWidth・offsetHeightはpaddingで取得するサイズはやborder、要素内のコンテンツによる可変を含みます。（marginは影響しません）

また、CSSにて指定したサイズをそのまま取得する場合は、clientWidth・clientHeightが利用可能です。