【jQuery】要素の高さを設定／取得する

こんにちは、Ryohei（@ityryohei）です！

jQueryにはある要素の高さを設定、取得する方法がいくつかありますので、一つずつご紹介していきたいと思います。

jQueryを読み込む

jQueryを利用するために、GoogleのCDNを利用してファイルを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

上記のスクリプトをheadタグ内に記載すると、読み込むことができます。

要素の高さを設定／取得する

jQueryで要素の高さを取得する場合は以下のメソッドを使います。

• height();
• innerHeight();
• outerHeight();

一つずつ見ていきましょう。

height()

heightメソッドは要素本来の高さを設定、取得します。

要素本来の高さというのはmarginやpadding、border等を含まない値を指します。

例として以下を実行すると、

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  alert( $('.panel').height() );
});
</script>
<style>
.panel {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 10px solid #555;
}
</style>
<div class="panel"></div>

Demo

デモで確認できる通り、アラートに100と数値が表示されます。

marginやpadding、borderの値を含まない値を返しています。

もし値を取得、ではなく設定する場合は、

<script>
$(document).ready(function(){
  $('.panel').height(50);
});
</script>

上記のように引数に数値を渡してあげると、要素の高さを指定することができます。

innerHeight()

innerHeight()は要素のpaddingを含む高さを取得するメソッドです。

上記で高さを取得する際に紹介したサンプルコードのheightをinnerHeightにしてみます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  alert( $('.panel').innerHeight() );
});
</script>
<style>
.panel {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 10px solid #555;
}
</style>
<div class="panel"></div>

Demo

デモを開くと、アラートが表示されます。表示される数値は120となっています。

要素の高さである100pxに上下のpadding値、10px + 10px が含まれた値になっています。

もし、innerHeightで要素の内側の高さを設定したい場合は、

<script>
$(document).ready(function(){
  $('.panel').innerHeight(50);
});
</script>

heightと同じように引数に数値を渡してあげると、設定することができます。

outerHeight()

outerHeight()は要素に設定されたheight、padding、borderを含めた値を返します。

以下を実行すると、

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  alert( $('.panel').outerHeight() );
});
</script>
<style>
.panel {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 10px solid #555;
}
</style>
<div class="panel"></div>

Demo

アラートに140と数値が表示されます。height(100px)+padding(10px+10px)+border(10px+10px)の値になっています。

もしmarginを含めた値を取得したい場合は、

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  alert( $('.panel').outerHeight(true) );
});
</script>
<style>
.panel {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 10px solid #555;
}
</style>
<div class="panel"></div>

Demo

outerHeight()の引数にtrueを指定することでmarginを含めた高さを取得することができます。

outerHeight()で高さを設定したい場合は、

<script>
$(document).ready(function(){
  $('.panel').outerHeight(50);
});
</script>

height()、innerHeight()と同じく引数に数値を渡してあげることで、高さを設定することができます。