【JavaScript+CSS】クエリパラメータに応じてCSSを切り替える
ダッシュボード的な画面を作りまして、さて皆さんどうぞご利用ください、と公開してみたら、「こっちの部署ではこの情報だけで良いんだけど」「あっちはあの情報もその情報も全部見たいんだけど」というご要望を頂き、「え~~~内部の処理同じなのに複数画面作って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増やしてクエリパラメータだけ変えてアクセスすれば実装できるので、楽!!
この記事が気に入ったらサポートをしてみませんか?