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/
