WebDesign Dackel

jQueryを使わずに親ボックスのサイズを取得する

jQueryを使わずに親ボックスのサイズを取得する

Hatena0
Google+0
Pocket0
Feedly0

親のボックスサイズを知りたい時にjQueryを使えば簡単ですが、いざネイティブで書こう!となった時に「ん?どうやんだっけ?」ってなったのでメモです。

前提

<div id="parent">
  <div id="child">Child</div>
</div>

こんな感じのHTMLがあったとして、div#childから親となるdiv#parentのボックスサイズが知りたい、といったシュチュエーションです。

ネイティブなJavaScriptで取得する

そもそもDOMのボックスサイズを知りたいときは、横幅がclientWidth、縦幅がclientHeightプロパティでそれぞれ内部的なサイズを知ることができます。
親のDOMを参照するにはparentNodeプロパティを使えば大丈夫そうです。

var child = document.getElementById("child");
var parent = child.parentNode;
console.log(parent.clientWidth, parent.clientHeight); //横幅, 縦幅

IE7まで確認しましたが、問題無く値が取得出来ました。

ただ、clientWidthclientHeightにはpaddingも含めたサイズが入っているのでその点に注意です。
paddingを含まないサイズだけが欲しい場合は、document.defaultView.getComputedStyle()CSSの値を取得してなんやかんやしなくてはダメっぽいです。

また親の参照にparentElementなるものがありますが、こちらはIEなんかで対応していないみたいなので、parentNodeを使って取得しています。

jQueryを使う場合

ちなみにjQuerypaddingも含めた内部サイズを取得するにはouterWidth()outerHeight()を使います。

var $child = $("#child");
var $parent = $child.parent();
console.log($parent.outerWidth(), $parent.outerHeight()); //横幅, 縦幅

まとめ

親要素の参照にはparentNodeを使い、横幅、縦幅はclientWidthclientHeightで取得する。

JavaScriptを書き始めてからこれまで、DOM操作に関してはほとんどjQueryに頼り切りでしたが、やっぱりネイティブなJavaScriptへの理解が必要だ!と感じたので少しずつ勉強していきたいと思いました。