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

かめの

2016.07.19

フロントエンジニア

こんにちはかめのです。

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

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

目次
はじめに
ウィンドウのサイズ・要素の大きさを調べる
- ウィンドウの大きさを調べる
- 要素の大きさを調べる
さいごに
jQuery入門ガイド

はじめに

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

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

ウィンドウの大きさを調べる

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

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

jQuery

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

[sourcecode lang="javascript"]

$function(){

// ウィンドウの幅

var winW = $(window).width();

// ウィンドウの高さ

var winH = $(window).height();

});

[/sourcecode]

要素の大きさを調べる

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

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

html

[sourcecode lang="html"]
&lt;div class=&quot;elem01&quot;&gt;
    &lt;p class=&quot;chocolate&quot;&gt;チョコレートチョコレートチョコレートチョコレートチョコレートチョコレート&lt;/p&gt;
    &lt;p class=&quot;maccha&quot;&gt;抹茶抹茶抹茶抹茶&lt;/p&gt;
    &lt;p class=&quot;pancake&quot;&gt;パンケーキパンケーキパンケーキパンケーキ&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

<p class="chocolate">チョコレートチョコレートチョコレートチョコレートチョコレートチョコレート</p>

<p class="maccha">抹茶抹茶抹茶抹茶</p>

<p class="pancake">パンケーキパンケーキパンケーキパンケーキ</p>

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$function(){
    // 要素の幅
    var elmW = $('.elem1').width();
    // 要素の高さ
    var elmH = $('.elem1').height();
});
[/sourcecode]