スタイル切り替えでフォントサイズを変えたい

質問

<a href="#" onClick="document.getElementById('resize').style.fontSize='smaller';">文字サイズ小さく</a>
<div id="resize">サイズを変えたい文</div>

というシンプルな方法でページ内の指定部分フォントサイズを変えたいのですが、実際には
<div id="resize"><p>サイズを変えたい文</p><p>サイズを変えたい文2</p><p>サイズを変えたい文3</p></div>
という構造になっていて、<p>が入っていると、サイズが変更しません。
出来ればclassで変更したいのと、スタイルシートを複数用意して読み込み先を切り替えるのではないやり方が好ましいのですが、良い方法ないでしょうか。

回答No.4

steel_gray · ベストアンサー

> 教科書通りにやっているのに効かないcssがたくさんあって、原因がさっぱりわかりません。

JavascriptというよりCSSの問題のようですね。
id=resize配下の全ての<p>のclassを変更するようなJavascriptを使うことも考えられますが、何か他のCSSが邪魔をしているか、あるいは単にCSSのエラーがあるのかもしれないのでCSSについて勉強を進めてもらうかポイントを絞ってCSSについて別に質問するとか、に、なると思いますがとりあえず構文チェックの方法だけ上げておきます。

http://www.htmlhelp.com/tools/csscheck/
CSSのチェックをしてくれるページ

http://www.mozilla-japan.org/products/firefox/
CSSの構文エラーも表示できるブラウザ（Firefox 1.5）
JavascriptコンソールでJavascriptだけでなくCSSの解析エラーも表示されます。

http://www.infoaxia.com/tools/webdeveloper/
またFirefoxに拡張機能をインストールすればリアルタイムでCSSの修正や結果の確認もできるようになります。

お礼

色々ありがとうございました。かなり勉強不足のようなので、CSSを調べて出直してきます。(´⌒｀。)

回答No.3

BLUEPIXY

font-size は、継承されるスタイルなので、
上位のdiv に適用したスタイルは、
下位のp にも適用されます。
多分、何らかの設定がされているのだと思います。

お礼

ご回答ありがとうございます。他にも教科書通りにやっているのに効かないcssがたくさんあって、原因がさっぱりわかりません。邪魔している何らかの設定がどれなのか１つ１つはずして調べたのですが、わかりませんでした。(T_T)

回答No.2

steel_gray

通常は質問のような書き方でも機能します。

段落(<p>)内の文章の文字サイズが変わらないのは、恐らくCSSでそれを拒むような指定が存在しているのではないでしょうか。

* {font-size:xxxx}や
p{font-size:xxxx}みたいな指定がありませんか？

font-sizeに関する指定を見直してみると解決するかもしれません。
逆にこの辺りの関連性が理解できていないとスクリプトでの変更は難儀です。

一応、質問文にある情報だけを頼りに変更案を出すなら。

<a href="#"
onClick="document.getElementById('resize').className='ti-saku';">文字サイズ小さく</a>

として、CSSで

#resize.ti-saku p{font-size:xxxx;}

と、指定しておけばフォントサイズをxxxxに変更できると思いますが、実際のHTMLとの差異が大きいと希望通りにならないかもしれません。

お礼

ご回答ありがとうございます。デフォルトのfont-sizeをpに指定していますが、それをはずしてもダメでした。
<a href="#" onClick="document.getElementById('resize').style.fontSize='smaller';">文字サイズ小さく</a>
<div><p id="resize">サイズを変えたい文</p></div>
とすると、デフォルトのfont-sizeを指定していても動きます。id="resize"指定した中に何らかのタグが入ると動かなくなります。理由がわかりません。(>_<)

回答No.1

3o-clock

http://www.koikikukan.com/archives/2005/10/15-233850.php
http://www.koikikukan.com/archives/2004/09/07-000250.php

MT以外でも可能なようです。
例えば
http://snoopy.candypop.jp/sb/log/eid124.html
SBでもOK。
なんでもOKです。

お礼

ご回答ありがとうございます。JavaScriptファイルを用意しない形でやりたかったのですが…MTとかSBって何ですか？