自治体サイトでアクセシビリティの一環として導入されている背景色変更機能を実装してみます。
このページでの実装方法は、背景色用の外部CSSを個別に用意しjQueryで切替えを行います。
レイアウト用CSSと背景色切替え用CSSを用意します
レイアウト用CSS／base.css
h1,ul {
margin:0;
padding:0;
}
#moji li{
margin:0.8em 0 0;
padding:0.4em 0.7em;
border:1px solid #CCC;
display:inline-block;
}
#contents{
width:580px;
border: 1px solid #CCC;
margin:0.5em 0 0 0;
padding: 0.5em;
line-height:1.5;
}
背景色「白」のCSS／siro.css
body{
background-color:#FFF;
color:#666;
}
#btn li{
background:#FC3;
}
#btn li:first-child{
background:#FFF;
}
背景色「黒」のCSS／kuro.css
body{
background-color:#000;
color:#F0F0F0;
}
#moji li:first-child{
background:#FC3;
}
#moji li:first-child a{
color:#000;
}
a:link{
color: #FC3;
}
htmlのヘッダにlink要素の指定をする
用意したレイアウト用CSSと背景切替え用のCSS（どちらか一つ）をヘッダに指定します。
指定後、切替えを行うCSSに「id=”haikei”」の指定を行います。
<link href="css/base.css" rel="stylesheet" type="text/css" /> <link id="haikei" href="css/siro.css" rel="stylesheet" type="text/css" />
スクリプトとサンプル
$("#moji li").click(function () {
var haikei = $("#haikei");
var no = $(this).parent().children().index(this);
switch (no){
case 0:
haikei.attr("href","css/kuro.css");
break;
case 1:
haikei.attr("href","css/siro.css");
break;
}
スクリプトの処理内容
//#moji li がクリックされた時の処理
$("#moji li").click(function () {
//id #haikeiを変数 haikei に格納
var haikei = $("#haikei");
//クリックされたli要素が何番目かを調べて変数「no」に代入
var no = $(this).parent().children().index(this);
//switch文で変数「no」の結果と他の値が一致するか調べる
switch (no){
//no が 0 （背景黒をクリック）の場合
case 0:
// haikei を指定しているlink要素を attr()を使ってcssを変更。
haikei.attr("href","css/kuro.css");
break;
//no が 1 （背景白をクリック）の場合
case 1:
// haikei を指定しているlink要素を attr()を使ってcssを変更。
haikei.attr("href","css/siro.css");
break;
}
jQueryの記述は「文字サイズ変更」の時と粗同じです。