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にはどのように記載すればよろしいのでしょうか?
長々と大変申し訳ありませんが、よろしくお願いいたします!
No.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に使い回しができないので)がある様にも思われますので、補足に対する上記の検証結果を報告するに留めさせて頂きます。
ディレクトリ構成をあらわしていただき、そこで間違えに気がつきました!
jsからcssへのパスをかいてしまっていました。
xhtmlからcssへのパスをかかなければいけなかったのですね・・・
とっても助かりました!ありがとうございました~!!
No.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>
No.3
- 回答日時:
ファイルの指定がおかしいとか?
../css/
を外してみたら正常に動いているよ!
リロードしなくても、
<link rel="stylesheet" ~にidをふって
.href = でcssを代入してやればOKなんだけどね~!
この回答への補足
ご回答ありがとうございます。
無事解決いたしました!
おっしゃる通りファイル指定に問題がありました。
jsの場所からcssのパスを書いていました・・・
今になってようやくわかったのですが、XHTMLからcssまでのパスをかかなければいけなかったのですね・・・
お手数おかけいたしました;
No.2
- 回答日時:
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でチェックするから出来ないなんてことはありますでしょうか?
No.1
- 回答日時:
完全コードじゃないので質問だけさせてもらうわ。
> どうもうまく動いてくれません
どう動かないの?
原因の切り分けはできているのよね?
まずは自力でどこまで成功しているのか
調べてみましょう。
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-transitio …
<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 ; }
このような状態です。
ご質問の内容に添えてなかったら、すみません・・・
よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
学習サイトを見よう見まねで、J...
-
mouseoverで、リンクをずらす。
-
ajax を使って,htmlを読み...
-
Google マップ でKMLの情報が正...
-
javascript htmlの追記について
-
VBAでCOPYを繰り返すと、処理が...
-
「ご処理進めて頂きますようお...
-
Excelシート上のマクロを登録し...
-
「PC Helpsoft Driver Updated...
-
エクセルで、日付を入力すると...
-
サブフォームのイベント取得
-
UWSC 画像認識で条件分岐
-
switch の範囲指定
-
スマホF-51Bに緊急時情報画面で...
-
VBA シート毎に画像挿入
-
csvに保存しているデータをURL...
-
DAOでSQLServerに接続し、LeftJ...
-
VBA エンターキーでイベントに...
-
お家デートをしててハグを長い...
-
UWSCを使って画像リンクをクリ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
確認ダイアログを次からは表示...
-
CSSでreadonlyの機能はあり...
-
formのsubmitを押すとモーダル...
-
Q&A掲示板の入力フォームに文字...
-
JavaScriptのinnerHTMLの挙動に...
-
3重のクォーテーション
-
JavascriptのHTMLクラス表示に...
-
クリックすると、色が変わるよ...
-
特定の条件のHTML要素を一括で...
-
折りたたみを全て開いて別ペー...
-
jqueryを使ったスムーススクロ...
-
jQuery 画面サイズにスライド画...
-
2回目以降のページロード時には...
-
Bootstrap Javascriptでモーダル
-
jQueryのSlickで矢印アイコンが...
-
javascriptとcssでフォントサイ...
-
JavaScriptのdiv.style属性の変...
-
フォームで「パスワード(確認...
-
macかwinか判別しスタイルシー...
-
javascript htmlの追記について
おすすめ情報