ベストアンサー

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

2006/01/26 07:03

<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で変更したいのと、スタイルシートを複数用意して読み込み先を切り替えるのではないやり方が好ましいのですが、良い方法ないでしょうか。

cumati
お礼率78% (11/14)

JavaScript
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2006/01/28 10:38 回答No.4

> 教科書通りにやっているのに効かない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の修正や結果の確認もできるようになります。

質問者

お礼 2006/01/29 00:55

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

その他の回答 (3)

BLUEPIXY
ベストアンサー率50% (3003/5914)

2006/01/26 13:57 回答No.3

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

質問者

お礼 2006/01/26 23:16

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

steel_gray
ベストアンサー率66% (1052/1578)

2006/01/26 10:19 回答No.2

通常は質問のような書き方でも機能します。段落(<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との差異が大きいと希望通りにならないかもしれません。

質問者

お礼 2006/01/26 23:13

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

3o-clock
ベストアンサー率33% (233/689)

2006/01/26 08:26 回答No.1

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です。

質問者

お礼 2006/01/26 23:09

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

関連するQ&A

文字サイズ変更ボタンでサイズが思うように制御できません
文字サイズ変更ボタンを配置して、下記のhtmlで大中小に変えられるようにしています。 <div><a id="fsize_l" onclick="document.body.style.fontSize='130%'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ　大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='100%'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ　中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='70%'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ　小" width="29" height="25" /></a></div> 元々の文字サイズは％で制御しているのですが、大→中（＝標準）に戻した時、元々のサイズとは異なるサイズになってしまいます。どうしてでしょうか？標準サイズを100％とし、中サイズも100％と記述しています。
- ベストアンサー
- HTML
文字サイズを変更できない
web制作していて、文字サイズ変更の機能をつけました。 * * * * * * * * * * * * * * * * <div id="fsize"> <div><a id="fsize_l" onclick="document.body.style.fontSize='large'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ　大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='small'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ　中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='x-small'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ　小" width="29" height="25" /></a></div> </div> * * * * * * * * * * * * * * * * IEとfirefoxで確認したところ、問題なくサイズ変更されていたんですが、制作を進めていったら、いきなり変更しない箇所がでてきてしまいました。全体のフォント指定はemでやっています。何が原因なのでしょうか？言葉足らずな部分があるかもしれませんが、どうぞよろしくお願いします。
- ベストアンサー
- HTML
リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと思っています。また対応するdivタグのdisplay属性も書き換えたいです。とりあえず思いついたのは以下の方法なのですが、冗長ですし、リンクの数が増えた場合に足していくのが大変です。もっとシンプルに書く方法がないものでしょうか。ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
style.displayだと効率悪いから...
style.displayだと効率悪いからfor文を使いたいです。以下はhtmlです。なぜ効率悪いかというと、一つ一つ、セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。構文が長くなってしまい、非効率です。しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
同じIDのスタイルをまとめて変更したい
JavaScriptでスタイルを変更しようと思ったのですが、なかなかうまくいきません。 <html> <head> <script language="JavaScript"> function change(obj) { document.getElementById(obj).style.color="#ff0000"; } </script> </head> <body> <div id="a">要素A</div> <div id="b">要素B</div> <div id="a">要素A</div> <input type="button" value="変更" onClick="change('a')"> </body> </html> 変更ボタンを押すとIDが"a"のフォントカラーが赤色になるはず、と思ったのですが、これだと1段目の「要素A」だけが赤色になり、3段目の「要素A」に変化がありません。getElementById()メソッドは上から1番目のIDしか参照しないのでしょうか。どうすれば1段目と3段目の両方のフォントカラーを変更できるでしょうか。
- ベストアンサー
- JavaScript
文字サイズ変更ボタンがIE6で反応しない
<style type="text/css"> #resize{font-size:12px;} #resize.middle{font-size:12px;} #resize.big{font-size:20px;} </style> とヘッダー部分に指定しておいて、 bodyタグ内で、 <input type="radio" name="sample" id="sample" onClick="document.getElementById('resize').className='middle'; return false;">中 <input type="radio" name="sample" id="sample" onClick="document.getElementById('resize').className='big'; return false;">大と記述し、文字サイズ変更ボタンを作成しました。 IE7、firefoxでは無事反応したのですが、 IE6だとなぜか反応してくれません。 IE6は文字サイズ変更には対応していないのでしょうか・・・。
- ベストアンサー
- JavaScript
スタイル切り替えの記述方法
document.getElementById('style01).style.fontSize='12px'; のようなやり方で行間やテーブルセルの余白も切り替えたいのですが、記述方法がわかりません。 document.getElementById('style01).style.lineHeight='1.2'; document.getElementById('style01).style.padding='120%'; とやっても動きません。記述方法を教えて下さい。よろしくお願いいたします。
- ベストアンサー
- JavaScript
style.displayだと効率悪いから…
style.displayだと効率悪いから違うやり方をしたいです。以下はhtmlです。なぜ効率悪いかというと、一つ一つ、セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。構文が長くなってしまい、非効率です。しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。
- ベストアンサー
- JavaScript
文字サイズ変更ボタンについて
大）　onclick=\"document.body.style.fontSize=\'130%\' 中）　onclick=\"document.body.style.fontSize=\'100%\' 小）　onclick=\"document.body.style.fontSize=\'70%\' 上記のhtmlで文字サイズ変更ボタンを置いています。動作は問題ないのですが、中を押した時に当初の大きさに戻したいのに、違うサイズになってしまいます。解消するにはどうしたらよいのでしょうか？
- 締切済み
- HTML
クリックで表示/非表示の切り替え
私は今現在HPを作成しているのですが、その中の特定のページでテキストをクリックしたら表示/非表示の切り替えをしたいと考えてます。表示/非表示自体は検索して出てきたオープンソースを拝借したら出来ました。ソースは下記のように記述してます。しかし、既存の状態だと『テキスト1』をクリックして表示させたらもう一度『テキスト1』をクリックしない限り非表示にはなりません。『テキスト1』をクリックして表示している状態で『テキスト2』をクリックしたら自動的に『テキスト1』の表示されてる部分を非表示しにしたいのですが。 <head> <SCRIPT type="text/JavaScript">  </SCRIPT> </head> <body> <a href="#" onClick="showHide('SH-001');return false;">テキスト1</a> <a href="#" onClick="showHide('SH-002');return false;">テキスト2</a> <div id="SH-001" style="display: none">テキスト1をクリックしたら表示される部分</div> <div id="SH-002" style="display: none">テキスト2をクリックしたら表示される部分</div> </body> Javascriptについてはまだ知識がなく解決方法が皆目見当もつきません。ご存知の方いらっしゃいましたらご教示ください。よろしくお願いします。
- ベストアンサー
- JavaScript

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