- ベストアンサー
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にはどのように記載すればよろしいのでしょうか？ 長々と大変申し訳ありませんが、よろしくお願いいたします！
- saku39b
- お礼率62% (5/8)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ANo.2です。 実際にサンプルで検証してみました。ANo.3様のご指摘の通り、JavaScriptファイルからCSSファイルを指定する階層が適切ではない様です。 現在、こういうディレクトリ構成になっているわけですよね？ ├ sample.html ├ common │ ├ css │ │ ├ common.css │ │ ├ font_big.css │ │ ├ font_medium.css │ │ └ font_small.css │ └ js │ └ fontsize.js 質問者様のソースだと、targetFileに格納するCSSファイルの参照先がfontsize.jsから見た相対パスになっていますが、実際にはその値がHTMLファイル中にdocument.writeで書き出されるわけですから、sample.htmlから見た相対パスにならないとCSSファイルが参照されない事に。 ※参考元のソースは、CSSファイルをhttp://～での指定にしてますので、階層を意識しなくていい事になりますが。 とりあえず、targetFile="common/css/font_small.css";…の様にパスを書き変えたら、IEでもFirefoxでもSafariでもCSSは有効になりました。 ただANo.2でも書きましたが、JavaScriptは詳しくありませんし、他の回答者の方が仰られている様により良いスクリプト（上記の理屈だと異なる階層のHTMLに使い回しができないので）がある様にも思われますので、補足に対する上記の検証結果を報告するに留めさせて頂きます。
その他の回答 (4)
自分ならこうするかも？ということで <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <script type="text/javascript"> function getCookie ( name ) { name = encodeURIComponent( name ).replace( /([.*()])/g, '\\$1' ); var value = document.cookie.match( RegExp ( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) ); return value ? decodeURIComponent( value[1] ) : ''; } var css = ['font_big.css', 'font_medium.css', 'font_small.css']; var s = getCookie('mystyle') || css[1]; document.write('<link rel="stylesheet" type="text/css" id="mystyle" href="'+ s +'">'); </script> <title>Change StyleSheet</title> </head> <body> <ul id="fontsize"> <li>大</li> <li>中</li> <li>小</li> </ul> <script type="text/javascript"> //@cc_on document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){ var e = evt./*@if (1) srcElement @else@*/ target /*@end@*/; var p = getParentByTagName(e, 'LI'); var n = 0; if (p && getParentById(e, 'fontsize')) { while (p = p.previousSibling) n++; setCookie('mystyle', css[n], 10); document.getElementById('mystyle').href = css[n]; } }, false); function getParentByTagName (e, tagname) { do if (e.tagName == tagname) return e; while (e = e.parentNode); return null; } function getParentById (e, eId){ while (e) if (e.id == eId) return e; else e = e.parentNode; return null; } function setCookie ( name, value, day, path, domain ) { return document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) + '; ' + 'expires=' + new Date( (new Date) - 86400000 * -day ).toUTCString() + '; ' + ( path ? 'path=' + encodeURI( path ) + '; ': '' ) + ( domain ? 'domain=' + encodeURI ( domain ) + '; ': ''); } </script> </body> </html>
お礼
ありがとうございます！ こちらも参考にしつつ、勉強していきます！
ファイルの指定がおかしいとか？ ../css/ を外してみたら正常に動いているよ！ リロードしなくても、 <link rel="stylesheet" ～にidをふって .href = でcssを代入してやればOKなんだけどね～！
補足
ご回答ありがとうございます。 無事解決いたしました！ おっしゃる通りファイル指定に問題がありました。 jsの場所からcssのパスを書いていました・・・ 今になってようやくわかったのですが、XHTMLからcssまでのパスをかかなければいけなかったのですね・・・ お手数おかけいたしました；
- abril
- ベストアンサー率69% (388/560)
JavaScriptはあまり詳しくなく、実際にサンプルで検証していないので、CSSの観点からのみ見てみました。 XHTMLファイル内に、#out_wrapに対応するマークアップが見あたりませんが、それは省略されているだけですよね？ JavaScriptを使用しない状態で、単純にXHTMLファイルから<link href="～">でfont_small.css/font_medium.css/font_big.cssをそれぞれ参照してみた場合には、意図した通りのフォント・サイズに表示されていますでしょうか？ そうであれば、やはりJavaScriptの方に某かの不具合があると考えられますが、そうでなかった場合には、CSSの設定の方がおかしい、という事になります。原因を突き詰めて行くにあたって、もしその点を確認していないのであれば、一度検証してみてはいかがでしょうか。
補足
回答ありがとうございます。 <script src="common/js/fontsize.js" type="text/javascript"></script> を外して、 <link href="common/css/@@@.css" rel="stylesheet" type="text/css"/> ＠部分を font_small font_medium font_big にかえて試すと、ちゃんとフォントサイズが変更されます。 #out_wrapは<body>のすぐしたにくる<div id=" ">の中身なので、その中の文字は全部変えるという意味で指示しました。 ちなみに、Safariでチェックするから出来ないなんてことはありますでしょうか？
- askaaska
- ベストアンサー率35% (1455/4149)
完全コードじゃないので質問だけさせてもらうわ。 > どうもうまく動いてくれません どう動かないの？ 原因の切り分けはできているのよね？ まずは自力でどこまで成功しているのか 調べてみましょう。 alert文埋め込みまくって変数の値を確認してみて。
補足
素早い回答ありがとうございます。 targetFile="../css/font_small.css"; targetFile="../css/font_medium.css"; targetFile="../css/font_big.css"; をalert("aaa");にかえて実行したところ、アラートにaaaとかかれたものが出ました。 ということは、javascripは間違えてないということでしょうか。 どう動かないかというと、 大中小の文字をクリックしてもCSSが切り替わってくれません。 一応読み込み（マウスがウェイト状態に一瞬なる感じ）はしているのですが、 フォントサイズはそのままの状態です。 上記に記載していない部分で、もしかしたら間違っているかもしれないので、記載します。 ●●●●●XHTML●●●●● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"/></html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="discription" content="●コピーがはいる●" /> <meta name="Keywords" content="●キーワード●" /> <title>タイトルが入る</title> <link href="common/css/common.css" rel="stylesheet" type="text/css"/> <script src="common/js/fontsize.js" type="text/javascript"></script> </head> <body> ・ ・ ・ <!------------------------------ /文字サイズ --> <div id="header_r_rightwrap"> <p>文字の大きさ</p> <ul> <li onclick="fontChange('big')">大</li> <li onclick="fontChange('medium')">中</li> <li onclick="fontChange('small')">小</li> </ul> </div> <!------------------------------ /文字サイズ --> ・ ・ ・ </body> ●●●●●css●●●●● 「font_small.css」内 #out_wrap p{ font-size : 12px ; } #out_wrap h1{ font-size : 10px ; } 「font_medium.css」内 #out_wrap p{ font-size : 14px ; } #out_wrap h1{ font-size : 12px ; } 「font_big.css」内 #out_wrap p{ font-size : 16px ; } #out_wrap h1{ font-size : 14px ; } このような状態です。 ご質問の内容に添えてなかったら、すみません・・・ よろしくお願いいたします。
お礼
ディレクトリ構成をあらわしていただき、そこで間違えに気がつきました！ jsからcssへのパスをかいてしまっていました。 xhtmlからcssへのパスをかかなければいけなかったのですね・・・ とっても助かりました！ありがとうございました～！！