アプリ版：「スタンプのみでお礼する」機能のリリースについて

javascriptとcssでフォントサイズを切り替えたい

解決済

  • 質問者：saku39b
  • 質問日時：
  • 回答数：5件

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にはどのように記載すればよろしいのでしょうか？

長々と大変申し訳ありませんが、よろしくお願いいたします！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： abril
  • 回答日時：

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に使い回しができないので）がある様にも思われますので、補足に対する上記の検証結果を報告するに留めさせて頂きます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ディレクトリ構成をあらわしていただき、そこで間違えに気がつきました！
jsからcssへのパスをかいてしまっていました。
xhtmlからcssへのパスをかかなければいけなかったのですね・・・

とっても助かりました！ありがとうございました～！！

通報する
お礼日時：2009/03/13 16:48

No.4

  • 回答者： _pipi_
  • 回答日時：

自分ならこうするかも？ということで


<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
こちらも参考にしつつ、勉強していきます！

通報する
お礼日時：2009/03/13 16:45

No.3

  • 回答者： _pipi_
  • 回答日時：

ファイルの指定がおかしいとか？


../css/
を外してみたら正常に動いているよ！

リロードしなくても、
<link rel="stylesheet" ～にidをふって
.href = でcssを代入してやればOKなんだけどね～！

この回答への補足

ご回答ありがとうございます。
無事解決いたしました！

おっしゃる通りファイル指定に問題がありました。
jsの場所からcssのパスを書いていました・・・

今になってようやくわかったのですが、XHTMLからcssまでのパスをかかなければいけなかったのですね・・・

お手数おかけいたしました；

補足日時：2009/03/13 16:41
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： abril
  • 回答日時：

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でチェックするから出来ないなんてことはありますでしょうか？

補足日時：2009/03/12 21:19
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： askaaska
  • 回答日時：

完全コードじゃないので質問だけさせてもらうわ。



> どうもうまく動いてくれません
どう動かないの？
原因の切り分けはできているのよね？
まずは自力でどこまで成功しているのか
調べてみましょう。
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 ; }


このような状態です。
ご質問の内容に添えてなかったら、すみません・・・

よろしくお願いいたします。

補足日時：2009/03/12 19:58
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報