フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【jQuery】横幅と高さを取得する方法/width()・height()

height()
innerHeight()
innerWidth()
jQuery
outerHeight()
outerHeight(true)
outerWidth()
outerWidth(true)
width()
メソッド

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

jQueryを使用して要素の横幅や高さを取得するメソッドはいくつも存在しています。
使用するメソッドによって取得出来る値は変わってきます。
この記事ではjQueryを使用して要素の横幅や高さを取得する方法をご紹介します。

サンプルコードは以下のHTMLとCSSをもとにどんな値が取得出来るのか見ていきます。

<div id="box">
    <div id="result"></div>
</div>
#box{
    width: 400px;
    height: 50px;
    padding: 15px;
    border: 15px solid #eee;
    margin: 15px;
    background: #ccc;
}
#result{
    width: 100%;
    height: 100%;
    font-size: 14px;
    background: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
}

横幅を取得する方法

jQueryで要素の横幅を取得するには以下のメソッドを使用することで取得することが出来ます。

  • width();
  • innerWidth();
  • outerWidth();
  • outerWidth(true);

どれも要素の横幅を取得するためのメソッドですが取得出来る値は異なります。
それぞれ何を含む横幅なのかしっかり把握する必要があります。

width()メソッドで取得する方法

width();メソッドを使用することで要素の横幅を取得することが出来ます。
取得出来る横幅は要素のみで「padding」や「border」、「margin」の値を除いた値です

取得
要素の横幅
padding×
border×
margin×
$(window).on('load',function(){
    let box_width = $('#box').width();
    $('#result').text("width()メソッドで取得出来る横幅は「" + box_width + "」です。");
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

innerWidth()メソッドで取得するする方法

innerWidth();メソッドを使用することで要素の横幅を取得することが出来ます。
取得出来る横幅は要素と「padding」を含む値です。

取得
要素の横幅
padding
border×
margin×
$(window).on('load',function(){
    let box_width = $('#box').innerWidth();
    $('#result').text("innerWidth()メソッドで取得出来る横幅は「" + box_width + "」です。");
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

outerWidth()メソッドで取得する方法

outerWidth();メソッドを使用することで要素の横幅を取得することが出来ます。
取得出来る横幅は要素と「padding」と「border」を含む値です。

取得
要素の横幅
padding
border
margin×
$(window).on('load',function(){
    let box_width = $('#box').outerWidth();
    $('#result').text("outerWidth()メソッドで取得出来る横幅は「" + box_width + "」です。");
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

outerWidth(true)メソッドで取得する方法

outerWidth();メソッドに引数としてtrueを渡して使用することで要素の横幅を取得することが出来ます。
取得出来る横幅は要素と「padding」と「border」、さらに「margin」を含む値です。

取得
要素の横幅
padding
border
margin
$(window).on('load',function(){
    let box_width = $('#box').outerWidth(true);
    $('#result').text("outerWidth(true)メソッドで取得出来る横幅は「" + box_width + "」です。");
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

高さを取得する方法

jQueryで要素の高さを取得するには以下のメソッドを使用することで取得することが出来ます。

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

どれも要素の高さを取得するためのメソッドですが取得出来る値は異なります。
それぞれ何を含む高さなのかしっかり把握する必要があります。

height()メソッドで取得する方法

height();メソッドを使用することで要素の高さを取得することが出来ます。
取得出来る高さは要素のみで「padding」や「border」、「margin」の値を除いた値です。

取得
要素の高さ
padding×
border×
margin×
$(window).on('load',function(){
    let box_height = $('#box').height();
    $('#result').text("height()メソッドで取得出来る高さは「" + box_height + "」です。");
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

innerHeight()メソッドで取得する方法

innerHeight();メソッドを使用することで要素の高さを取得することが出来ます。
取得出来る高さは要素と「padding」を含む値です。

取得
要素の高さ
padding
border×
margin×
$(window).on('load',function(){
    let box_height = $('#box').innerHeight();
    $('#result').text("innerHeight()メソッドで取得出来る高さは「" + box_height + "」です。");
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

outerHeight()メソッドで取得する方法

outerHeight();メソッドを使用することで要素の高さを取得することが出来ます。
取得出来る高さは要素と「padding」と「border」を含む値です。

取得
要素の高さ
padding
border
margin×
$(window).on('load',function(){
    let box_height = $('#box').outerHeight();
    $('#result').text("outerHeight()メソッドで取得出来る高さは「" + box_height + "」です。");
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

outerHeight(true)メソッドで取得する方法

outerHeight();メソッドに引数としてtrueを渡して使用することで要素の高さを取得することが出来ます。
取得出来る高さは要素と「padding」と「border」、さらに「margin」を含む値です。

取得
要素の高さ
padding
border
margin
$(window).on('load',function(){
    let box_height = $('#box').outerHeight(true);
    $('#result').text("outerHeight(true)メソッドで取得出来る高さは「" + box_height + "」です。");
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめて確認

最後に全てをまとめて確認してみましょう。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか?
横幅と高さは要素に何を含むかによって値は変わってきます。
自分が使いたい要素は何を含むのかしっかり把握して適切なメソッドを使用していきたいですね。