I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

I'll be NET BLOG

なにかの役には立つかもしれない。

トップページ > jQuery > セレクトボックスを変更すると読み込むCSSを変更し、選択結果をクッキーに保存するjQuery

セレクトボックスを変更すると読み込むCSSを変更し、選択結果をクッキーに保存するjQuery

セレクトボックスを変更した時、読み込むCSSを変更してみます。
サイトのデザインを変更したり、フォントサイズを変更する場合などにも利用できます。

下記のサンプル画像では、セレクトボックスの選択結果に応じて背景色などを変更しています。

サンプル
画面左上のセレクトボックスをDefaultに設定すると背景灰色で表示します。

サンプル
画面左上のセレクトボックスをBlackに設定すると背景黒色で表示します。

今回は、選択結果をクッキーに保存してみます。
クッキーに保存することで、次回アクセス時にも選択結果を引き継ぐことができます。
選択結果をクッキーに保存する際に、js.cookie.jsを利用します。

I'll be NET|jQueryでクッキーを操作するjs.cookie.js(jquery.cookie.js)の使い方まとめ

HTMLを準備する

headタグ内の記述

headタグ内でデフォルト用のCSSを読み込んでおきます。
CSSを読み込むためのlinkタグにはidを設定しておきます。
また、js.cookie.jsを配布元からダウンロード・解凍して読み込んでおきます。

    <link rel="stylesheet" href="./css/color_default.css" type="text/css" media="all" id="switchCSS" />
    <script type="text/javascript" src="./js/js.cookie.js"></script>
bodyタグ内の記述

bodyタグ内に読み込むCSSを選択するためのセレクトボックスを設置します。
optionのvalueにはクッキーに選択したい文字列を入力しておきます。

<select id="selectCSS">
    <option value="default">デフォルト用CSS</option>
    <option value="black">黒色用CSS</option>
</select>

CSSを準備する

読み込むためのCSSとして、

  • デフォルト用のCSS(./css/color_default.css)
  • 黒色用のCSS(./css/color_black.css)

を用意しておきます。
それぞれのURLは、jQuery側で定義します。

jQueryの記述

下記のソースをheadタグ内に記述するか、外部jsとして読み込んでください。

// CSSのURLを定義
    var defaulturl= './css/color_default.css';
    var blackurl= './css/color_black.css';
// 画面表示時のCSSの読み込み設定
    $(document).ready(
        function() {
            if (!Cookies.get('cookieCSS')) {
                // クッキー未登録であればデフォルト選択
                    $("#selectCSS").val("default");
            } else if (Cookies.get('cookieCSS') == 'default') {
                // クッキーにデフォルト登録であればデフォルト選択
                    $("#selectCSS").val("default");
                // defaultCSSを読み込む
                    $("#switchCSS").attr("href" , defaulturl);
            } else if (Cookies.get('cookieCSS') == 'black') {
                // クッキーブラック登録であればブラック選択
                    $("#selectCSS").val("black");
                // blackCSSを読み込み設定
                    $("#switchCSS").attr("href" , blackurl);
            }
        }
    );
// セレクトボックス操作時の設定
    $(function(){
        $('#selectCSS').change(function(){
            // セレクトボックスのvalueを取得
                var val = $(this).val();
            // valueによって読み込むCSSを変更する
                if (val == "default") {
                    cssurl = defaulturl;
                } else if (val == "black") {
                    cssurl = blackurl;
                }
            // 選択結果をクッキーに登録する
                Cookies.set('cookieCSS', val);
            // CSSを読み込む
                $("#switchCSS").attr("href" , cssurl);
        });
    });

記事移動

関連記事

ラジオボタンを選択すると特定エリアの背景色を変更、選択結果をクッキーに保存するjQuery

創作サイトの携帯電話・スマートフォンなどのモバイル対応方法(初心者編)

pixiv小説のように小説を表示する方法まとめ

jQueryでフォントサイズを変更してjs.cookie.jsでクッキーに保存してみる

jQueryでフォントサイズを変更してjs.cookie.jsでクッキーに保存してみる

jQueryでクッキーを操作するjs.cookie.js(jquery.cookie.js)の使い方まとめ

jQueryでクッキーを操作するjs.cookie.js(jquery.cookie.js)の使い方まとめ

pixiv小説のように明朝体・ゴシック体を切り替えるjQuery

pixiv小説のように縦書き・横書きを切り替えるjQuery

html画面を読み込み完了するまでローディング画像を表示するjQuery

マウスオンでにゅるっと広がるjQueryメニュー

コメント登録

  • コメントを入力してください。
登録フォーム
名前
メールアドレス
URL
コメント
閲覧制限
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

日記検索

エントリー検索フォーム
キーワード

Feed

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】