こんにちは、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()と同じく引数に数値を渡してあげることで、高さを設定することができます。

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。