要素のwidthとheightを取得する方法!Javascript初心者の勉強

htmlの要素のstyleで設定されているwidthを取得する方法について調べてみました。

jQueryでwidthとheightを取得する

jQueryでwidthとheightを取得してみます。

See the Pen get width in jQuery by Nakamoto (@programmerlife) on CodePen.

jQueryでwidthやheightを取得するにはそのままwidthやheightを使用します。
上記例では以下の文を使用し取得しています。

// div 要素
const areaWidth = $("#area").width();
const areaheight = $("#area").height();
// p要素
const pWidth = $("#area p").width();
const pHeight = $("#area p").height();

シンプルでわかりやすいですね。

純粋なJavascliptでwidthとheightを取得する

Javascriptでwidthとheightを取得してみます。

サンプルコード

See the Pen get width and height in Vanilla JS by Nakamoto (@programmerlife) on CodePen.

上記例ではgetBoundingClientRect()という位置情報やwidthやheightを取得できるメソッドとoffsetWidthとoffsetHeightというメソッドを使っています。

getBoundingClientRect()はidから値を取得するのに便利です。

const divPositionInfo = document.getElementById("area2").getBoundingClientRect();
const divWidth = divPositionInfo.width;
const divHeight = divPositionInfo.height;

offsetWidthとoffsetHeightはquerySelectorを使用して取得することができます。

const pElm = document.querySelector("#area2 p");
const pWidth = pElm.offsetWidth;
const pHeight = pElm.offsetHeight;

サンプルではpタグは上位一つの要素しか取得していませんが、「document.querySelectorAll('#area2 p');」のようにして全ての要素を取得することも可能です。中身を取り出すにはループさせると個々を取り出せます。

使われ方は違いますがquerySelectorAllの参考記事です。ループ方法などの参考になればと思います。

おわり

jQueryって本当に簡単なんだなとしみじみ思いました。
widthとheightを取得できるということは、widthとheightを変更することもできそうで便利そうですね。

参考

https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height
https://www.javascripttutorial.net/dom/css/get-width-and-height-of-an-element/