javascriptとcssでフォントサイズを切り替えたい
javascriptとcssでフォントサイズを大中小で切り替えたいと思い、いろいろとサイトをまわりながら以下のようなものを作成しました。
しかし、どうもうまく動いてくれません。
●●●●●javascript●●●●●
function fontChange(str){
var targetFile;
switch(str){
case "small":
targetFile="../css/font_small.css";
break;
case "medium":
targetFile="../css/font_medium.css";
break;
case "big":
targetFile="../css/font_big.css";
break;
default:
alert("error");
break;
}
//フォント用CSSのファイル名をクッキーの値として保存
//フォント切り替え機能をサイト全体適用するためpathに/（ルート）を指定
document.cookie="fontstyle="+targetFile+";path=/;";
window.location.reload(); //ページをリロードして設定を反映。
}
//以下はページが読み込まれる際必ず実行される処理
var name="fontstyle";
var cookie=document.cookie; //クッキーを取得
if(-1==cookie.indexOf(name)){ //クッキーがなければmediumを指定（デフォルト）
var file='../css/font_medium.css';
}else{
var pos_s=cookie.indexOf(name)+name.length+1; //クッキーの値の開始位置
var pos_e=cookie.indexOf(";",pos_s); //クッキーの値の終了位置
if(-1==pos_e){ //末尾にセミコロンがあるか？
var file=cookie.slice(pos_s); //無い
}else{
var file=cookie.slice(pos_s,pos_e); //有る
}
}
//クッキーの値に対応するCSSを読み込む。
document.write('<link rel="stylesheet" href="'+file+'" type="text/css" />');
●●●●●css●●●●●
各種用意しました
●●●●●XHTML●●●●●
<ul>
<li onclick="fontChange('big')">大</li>
<li onclick="fontChange('medium')">中</li>
<li onclick="fontChange('small')">小</li>
</ul>
ちなみにこちらのサイトを参考にいたしました。
http://ks-product.com/arc/2007/01/0701082109.html
また、XHTML内の<li onclick～>というのをCSSにして<li id="●●">にしたいと思っているのですが、その際CSSにはどのように記載すればよろしいのでしょうか？
長々と大変申し訳ありませんが、よろしくお願いいたします！
お礼
ありがとうございます！ まさか、こんなに早く、ご回答が頂けるとは、思いませんでした。 ご回答を頂いてから、辞書を引いてみましたが、「ミニチュア」のつづりは、“miniature”ですね。“a”が抜けているようでした。 大変助かります。誠にありがとうございました！！！