jQuery：高さ / paddingを含めた高さ / marginを含めた高さの求め方（検証付き）

jqueryで要素の高さを求めたいことって結構あるかなと思います。

たとえば、「横に並べた要素の高い方の高さを取得して、高さを揃えたり」、「固定ヘッダーの高さを取得して、ページ内リンクをその高さ分位置調整したり」などです。

このように要素の高さは割といろいろな場面で使います。このとき、paddingやborderも含んだ高さが欲しいと思ったりすることがあります。その取得の仕方を今回メモしておきたいと思います。

ついでにmarginを含んだ高さも確認してみます。

スポンサーリンク

求め方

早速ですが、それぞれの求め方です。

通常の高さ

var h1 = $(".example").height();

要素の純粋な高さが求められます。

paddingとborderまで含む高さ

var h2 = $("div").outerHeight();

要素の高さにpadding、borderの高さも加えた高さが求められます。box-sizingの設定によっては、取得できる高さが変わりそうです。

paddingとborderとmarginを含む高さ

var h3 = $("div").outerHeight(true);

要素の高さにpadding、border、marginをの高さも加えた高さが求められます。box-sizingの設定によっては、取得できる高さが変わりそうです。

例

では、実際に試してみます。下記要素を例に値を取得してみましょう。

<div class="example"></div>
<style>
.example {
  background: orange;
  border: 10px solid black;
  box-sizing: content-box;
  height: 100px;
  margin: 10px; 
  padding: 10px; 
  width: 100px;
}
</style>

要素の特徴

  • 幅、高さ100px
  • border 10px（上下左右）
  • margin 10px（上下左右）
  • padding 10px（上下左右）

各高さを取得した結果

height()
高さ		 100px
outerHeight()
paddingとboederを含む		 140px
outerHeight(true)
さらにmarginも含む		 160px
  • height()・・・純粋な高さ100pxを取得できた
  • outerHeight()・・・borderとpadding を含んだ高さ140pxを取得できた
    ※border、paddingどちらも上下合わせて20pxなので$20px \times 2= 40px$分高くなった
  • outerHeight(true)・・・borderとpaddingとmargin を含んだ高さ160pxを取得できた
    ※border、padding、margin いずれも上下合わせて20pxなので$20px \times 3= 60px$分高くなった

先ほど「求め方」で見たとおりの高さが取得できました。

「box-sizing」が「border-box」の場合

「box-sizing」には「content-box」と「border-box」のパターンがあります。先ほどの例では「content-box」でしたので、次は「border-box」の方を見てみます。

content-box

先ほどの上の例では、クラス「example」は「box-sizing: content-box;」と設定していました。この「content-box」は、要素の外側にpaddingやborderを加えるというような設定です。

イメージとしては、200pxの身長の人に「高さ20pxのコックさんみたいな帽子」と「高さ20pxのヒール」を履かせたという感じです。

その人自身は200pxですが、帽子と靴を合わせると240pxになるみたいな…。分かりにくいですかね？（笑）

border-box

次にこれから確認していく「border-box」を見ていきます。

「content-box」とは反対で、「border-box」は、要素の内側にpaddingやborderがあるというような設定です。

イメージとしては、200pxの身長に見える人がいます。ですが、実は「髪の毛を固めて20px高く」「つま先立ちをして20px高く」見えるようにしているという感じです。

その人は身長200pxと言い張りますが、実は髪の毛とつま先立ちによって40px高く見せてるだけで、中身は実は160pxみたいな…。同じく分かりにくいですかね？（笑）

つまり、高さを200pxに設定しても、実際テキストや画像を置くスペースは高さ160pxとなります。これが「border-box」の特徴ですね。

例

では、実際に試してみます。先ほどの例の「box-sizing」を「border-box」に変更しただけのもので見てみましょう。

<div class="example2"></div>
.example2 {
  background: orange;
  border: 10px solid black;
  box-sizing: border-box;
  height: 100px;
  margin: 10px; 
  padding: 10px; 
  width: 100px;
}
要素の特徴
  • 幅、高さ100px
  • border 10px（上下左右）
  • margin 10px（上下左右）
  • padding 10px（上下左右）
各高さを取得した結果
height()
高さ		 60px
outerHeight()
paddingとboederを含む		 100px
outerHeight(true)
さらにmarginも含む		 120px
  • height()・・・純粋な高さ60pxを取得できた
    ※border、paddingどちらも上下合わせて20pxなので$20px \times 2= 40px$分低くなった
  • outerHeight()・・・borderとpadding を含んだ高さ100pxを取得できた
    ※高さにborder、paddingが含まれていることが分かる
  • outerHeight(true)・・・borderとpaddingとmargin を含んだ高さ120pxを取得できた
    ※border、paddingは高さに含まれているが、margin は上下合わせて20pxなのでその分高くなった

先ほどの「content-box」とはborder、paddingと高さとの関係性が異なるので、「border-box」では違う結果になりました。

実際に高さを取得する際には「content-box」「border-box」のどちらを指定しているかに注意して対応を行う必要があることが分かりました。

まとめ

outerHeight()の存在は知っていましたが、引数にtrueを渡すことでmarginも含んだ値を取得できるのは初めて知りました。なかなか便利そうです。

注意点

「box-sizing」の値が「border-box」なのか？「content-box」なのか？という点を気にしておかないと、うまく対応できないと思います。対応の際には注意が必要ですね。

それでは、最後までお読みいただきありがとうございました！

スポンサーリンク