jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。

width()を使う

ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。

jQuery

01
02
03
04
05
06
07
08
09
10
11
<script>
$(function() {
    var w = $(window).width();
    var x = 500;
    if (w <= x) {
        $('#sample').css({
            color: 'red'
        });
    }
});
</script>

HTML

1
<p id="sample">サンプル</p>

ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読み込み後にウィンドウサイズを変更しても変わりません。ちょっと微妙ですね。なのでresize()を使ってリアルタイムで現在のウィンドウサイズを取得していきます。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<script>
$(window).resize(function(){
    var w = $(window).width();
    var x = 500;
    if (w <= x) {
        $('#sample').css({
            color: 'red'
        });
    } else {
        $('#sample').css({
            color: 'black'
        });
    }
});
</script>

これで、ウィンドウサイズが500px以下の場合は文字が赤になり、それ以外は黒になります。読み込んだ後にウィンドウサイズを変更してもリアルタイムで変化していきます。

応用次第で色んなところに活用できますね。

CSSで可変式ドロップダウンメニューCSSだけでシンプルな可変式のドロップダウンメニューを作ってみた前のページ

Lightroomでトーンカーブの色々な補正パターンについて次のページLightroomのトーンカーブの補正パターン

最近の記事
  1. 宇治抹茶&ホワイトチョコスコーン
  2. トリビュートブレンド
  3. ティラミスマラサダ
PAGE TOP