- ベストアンサー
フォントサイズを変更するスクリプト
こんにちは。 早速ですが、フォントサイズを変更するスクリプトを探していて、見つけたのが、 http://www.openspc2.org/JavaScript/library/string/fontsize_set/index.html ですが、これでやるとサイズを変更した時、テーブル内のフォントは変更できないのでしょうか？ 初心者のためどこをどう修正して良いかわからなかったので、質問させていただきました。オンマウスではなく、クリックでサイズを変更したいと思います。 初心者のヒコっ子ですが、宜しくお願い致します。
- momokocyan
- お礼率26% (9/34)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
「視覚系ユーザーエージェントはその要素にfont-sizeが指定されていない場合は、親要素のfont-sizeを参照するべき」と言う決まりがあるんです。 ですから親要素から値を貰ってその要素のfont-sizeが決まるので継承と呼ぶとおもいます。 もし、全ての要素に作成者によるスタイルシートやユーザースタイルシートでfont-sizeが指定されていなくてもデフォルトのスタイルシートがあるのでfont-sizeはブラウザ任せで決められます。 確かこんな流れだと思いました。 そこで、bodyはHTMLの直下の要素なので目に見える部分のfont-sizeを決めるには丁度良い要素なんですが、世に出ている視覚系ユーザーエージェントには、table要素にfont-sizeを継承しないものが含まれているんです。 http://www.hajimeteno.ne.jp/stylesheet/actually/fsize.html その中の1つがたまたまIE6なんです。（本当は、たまたまかどうか知りませんけどね） そんなことを踏まえて document.getElementsByTagName('table')[0].style.fontSize='9pt' こんなことを追加すれば良いと思います。 ブラウザの対応範囲を広げるならtableにidをつけてdocument.all(id)なんてオブジェクトを指定するのも良いかもしれません。 その辺りは個人サイトでしたらアクセス解析と相談しながらいろいろ調べてください。 無駄に対応しても仕方がないですからね。
その他の回答 (1)
urlのがどういう物かは見てないけどcssなどをjavascriptからいじる系ならtableにもそのstyleが継承されていれば変更できる。 継承されていない、或いはtableは別のstyleであるなら変更対象が別に存在する事になる。 参考まで。
補足
SAYKA様 早速の回答ありがとうございます。 大変申し訳ないのですが、「tableにもそのstyleが継承されていれば」の部分が勉強不足のためよく分かりませんでした。 下のサンプルの場合、テーブル部分のフォントを同じように変化させようとるすると、どのようになるのでしょうか？ 重ね重ね申し訳ありませんが、宜しくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> あいうえお<br> <br> <a onClick="document.body.style.fontSize='9pt'" href="#">9ptに設定</a><br> <a onClick="document.body.style.fontSize='10pt'" href="#">10ptに設定</a><br> <a onClick="document.body.style.fontSize='12pt'" href="#">12ptに設定</a><br> <a onClick="document.body.style.fontSize='16pt'" href="#">16ptに設定</a><br> <a onClick="document.body.style.fontSize='18pt'" href="#">18ptに設定</a><br> <a onClick="document.body.style.fontSize='24pt'" href="#">24ptに設定</a><br> <br> <table width="300" border="0" cellspacing="0" cellpadding="3"> <tr> <td>あいうえお</td> <td>かきくけこ</td> <td>さしすせそ</td> </tr> <tr> <td>あいうえお</td> <td>かきくけこ</td> <td>さしすせそ</td> </tr> <tr> <td>あいうえお</td> <td>かきくけこ</td> <td>さしすせそ</td> </tr> </table> </body> </html>