ある画面幅を境に任意のボックスへ動的にclass名を付与する方法

サンプル

まずは、こちらのサンプルをご覧くいださい。画面幅を縮めると背景に色が付いて、画面幅を広げると背景色が消えます。これは、画面幅500pxより狭いときには、.pinkというクラスがboxに付与され、500px以上の時にはそのクラス名が外されるからです。

サンプルの記述例と解説

記述例

上記サンプルの記述例です。まずは、jQueryの本体を読み込みます。

<script src="js/jquery.js"></script>

続いて以下コードを記述します。5行目に分岐となる値(ここでは500px)を、7行目と9行目には付与されるclass名(ここでは.pink)を記述します。

$(window).resize(function(){
    //windowの幅をxに代入
    var x = $(window).width();
    //windowの分岐幅をyに代入
    var y = 500;
    if (x <= y) {
        $('#box').addClass('pink');
    } else {
        $('#box').removeClass('pink');
    }
});

解説

1行目の.rezizeは画面幅が変更された際にトリガーとなるjQueryメソッドです。画面幅が変更されると、以降のコードが実行されます。

まずはじめに実行されるのが3行目。.windowは幅を見るメソッドで、これで画面サイズを取得して、変数xの中に代入します。

続いて5行目。変数yの中に境となる値を代入します(上記サンプルでは500(px)となっていますが、ここは任意の値に変更していただいて構いません)。そして、6行目でxとyの値を比較して、画面幅が500pxとしたyより大きかったらそれ以降のコードが実行されます。

そして7行目と9行目。.addClassはクラスを付与するjQueryメソッド、.removeClassはクラスを外すメソッドです。.pinkというクラス名を付けたり外したりする指定になります。

画面幅の取得や特定の変数の値の比較、クラス名を付ける・はずす、といったメソッドは、知っておくと色々と応用が利くので便利ですよ。