【JavaScript＋CSS】クエリパラメータに応じてCSSを切り替える

2021年11月5日 11:39

ダッシュボード的な画面を作りまして、さて皆さんどうぞご利用ください、と公開してみたら、「こっちの部署ではこの情報だけで良いんだけど」「あっちはあの情報もその情報も全部見たいんだけど」というご要望を頂き、「え～～～内部の処理同じなのに複数画面作ってhtmlもcssもjsも全部メンテするのや～だ～」ってことで、「同じhtml＋jsを、クエリパラメータによってcssを切り替えて表示すりゃいいんじゃ？」とひらめいたので、作っていきます。

これなら追加でメンテするのはcssだけでいいぞ。

HTML

<!-- sample.html -->
<!DOCTYPE html>
<html lang="ja" xml:lang="ja">
<meta charset="utf-8">

<!-- ヘッダー内でスクリプトとcssを読み込む -->
<head>
   <title>CSS切り替えテスト</title>
   <script defer src="/scripts/switch_css.js?v=0"></script>
   <link href="main.css" rel="stylesheet" id="switch_css">
</head>

<!-- 表示する部分 -->
<body>
    <div id = "block_a">Aブロックです</div>
    <div id = "block_b">Bブロックです</div>
</body>
</html>

必要な情報は全部載せておく。

「画面に寄っては、ここからここまではまとめて非表示にしたい」って部分は、タグで囲ってidなりclassなりを付与しておくとらくちん。

それ以外も、要素という要素にid・classを適切に配置しておくと、「こういうレイアウトの画面も欲しいなー」って後から出てきたときに楽。

CSS

// main.css --通常のcss
#block_a{
    display:block;
}
#block_b{
    display:block;
}

// sub.css --切り替え用のcss
#block_a{
    display:block;
}
#block_b{
    display:none; // Bブロックを非表示にする
}

非表示にしたい要素のdisplayをnoneに設定することで非表示にする。

他にも、例えばflexboxやグリッドレイアウトを使って、flex-directionを変えるとか、orderを変えるとかすることで大幅な表示レイアウトの変更も可能。

JS

//switch_css.js
function switch_css(){
   // クエリパラメータを取得
   let param = location.search
   let param_map = query_param_to_map(param);
   console.log(param_map)
   
   // クエリパラメータにmodeが無ければ何もしない
   if(!param_map.get("mode")){return}
   
   // クエリパラメータに応じたcssに切り替える
   let css_url = param_map.get("mode") + ".css";
   var linkstyle = document.getElementById('switch_css');
   linkstyle.href = css_url;
}

// クエリパラメータを取得してMAPにする
function query_param_to_map(param) {
   param = param.replace('?', '');
   let param_splitted = param.split('&');
   let param_map = new Map();
   param_splitted.forEach( val => {
       let splitted_val = val.split('=');
       param_map.set(splitted_val[0], splitted_val[1]);
   });
   return param_map ;
}

window.addEventListener("DOMContentLoaded", switch_css)

クエリパラメータを取得してMapに入れる処理は前回記事を参照。

これで、クエリパラメータに?mode=subを指定してアクセスしてあげればCSSが切り替わります。やったね。

肝になるのは

   let css_url = param_map.get("mode") + ".css";
   var linkstyle = document.getElementById('switch_css');
   linkstyle.href = css_url;

ここと

window.addEventListener("DOMContentLoaded", switch_css)

ここ。

・cssを切り替えるために、document.getElementById('switch_css')でcssリンクタグを取得出来るように、htmlでリンクタグにidを付与しておく

・linkstyle.href = css_url;　でリンクタグのhref要素を書き換える

・loadイベントのタイミングでの切り替えだとちょっと遅いので、DOMContentLoadedのタイミングでcss切り替えができるようにする。

これなら、sub2画面とかsub3画面とかが必要になっても、css増やしてクエリパラメータだけ変えてアクセスすれば実装できるので、楽！！

この記事が気に入ったらサポートをしてみませんか？