SONICMOOV Googleページ

【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。

【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。

  • このエントリーをはてなブックマークに追加

こんにちはかめのです。

前回の記事【jQuery入門 7】CSSの取得・追加・変更をしようでは、jQueryでCSSの取得や変更などをしました。

今回はウィンドウや要素の大きさを取得してみようと思います。

はじめに

ウィンドウの大きさによってコンテンツを変えたり、要素の高さをそろえたり。
大きさを知りたいときってありますよね。

ウィンドウのサイズ・要素の大きさを調べる

ウィンドウの大きさをしらべる

まずはウィンドウの大きさから見ていきましょう。

DEMO 01 : ウィンドウの大きさをしらべる

jQuery

$function(){
    // ウィンドウの幅
    var winW = $(window).width();
    // ウィンドウの高さ
    var winH = $(window).height();
});

要素の大きさをしらべる

次に要素の大きさを見てみましょう。

DEMO 02 : 要素の大きさをしらべる

html

<div class="elem01">
    <p class="chocolate">チョコレートチョコレートチョコレートチョコレートチョコレートチョコレート</p>
    <p class="maccha">抹茶抹茶抹茶抹茶</p>
    <p class="pancake">パンケーキパンケーキパンケーキパンケーキ</p>
</div>

jQuery

$function(){
    // 要素の幅
    var elmW = $('.elem1').width();
    // 要素の高さ
    var elmH = $('.elem1').height();
});

DEMO 02の要素はそれぞれ高さが違うため背景色が揃っていません。
一番高い要素(ここではチョコレート)に合わせてあげるときれいにそろいますね。
ちなみに.widht()、.height()の引数に数値を指定することもできます。
高さを揃える方法は他にもありますがまた別の機会に。

さいごに

他にも要素のボーダーやパディングを含めた大きさを取得するメソッドもあります。
ウィンドウや要素の大きさを取得するだけでなく大きさの指定もできてしまうのでとても便利ですね。

参考URL
http://api.jquery.com/width/
http://api.jquery.com/height/

第9回目はこちら。
【jQuery入門 9】様々なアニメーションをつけよう。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

かめの(マークアップエンジニア)

趣味は昼寝です。

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation