JavaScript | HTML要素の幅と高さから面積を計算する

2021-02-012021-02-08JavaScript 数値・計算,JavaScript

JavaScriptでHTML要素の幅と高さを取得して、そのピクセル単位の面積を計算する方法のサンプルです。

See the Pen JavaScript | Compare element sizes by yochans (@yochans) on CodePen.

HTML要素の面積を計算する

HTML要素のの幅と高さから面積（px）を計算するサンプルコードです。

<div id="taget"></div>

#box{
	width: 120px;
	height: 100px;
	margin: 10px;
	padding: 5px;
}

let target = document.querySelector('#box');

let = area_size = target.offsetWidth * target.offsetHeight;

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

offsetWidth・offsetHeightはpaddingで取得するサイズはやborder、HTML要素内のコンテンツによる可変を含みます。

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