Re: 文字サイズをボタンで変更したい ( No.2 ) |
- 日時: 2006/08/30 09:00
- 名前: カヅサツ
- 参照: http://kadu.vis.ne.jp/main/
- あえて全サンプルを掲載してみる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja" dir="ltr"> <head> <title></title> <script type="text/javascript"> function ChangeFontSize(size){ document.getElementsByTagName('body')[0].style.fontSize = size; } </script> <style type="text/css"> body{ font-size: medium; } h1{ font-size: 200%; } h2{ font-size: 150%; } table,th,td{ border: 1px solid black; } </style> </head> <body> <h1>テストページ</h1> <script type="text/javascript"> if(document.compatMode!='BackCompat'){ document.write("<h2>フォントサイズ変更<\/h2>"); document.write("<ul class=\"fontsize\">"); document.write(" <li><button type=\"button\" onclick=\"ChangeFontSize('x-large');\">x-Large<\/button><\/li>"); document.write(" <li><button type=\"button\" onclick=\"ChangeFontSize('large');\">Large<\/button><\/li>"); document.write(" <li><button type=\"button\" onclick=\"ChangeFontSize('medium');\">Medium<\/button><\/li>"); document.write(" <li><button type=\"button\" onclick=\"ChangeFontSize('small');\">small<\/button><\/li>"); document.write(" <li><button type=\"button\" onclick=\"ChangeFontSize('x-small');\">x-small<\/button><\/li>"); document.write("<\/ul>"); } </script> <p>JavaScriptで body要素のスタイルシートの font-size を書き換えています。ボタン部分はは JavaScript で出力しています(JavaScript未対応環境でボタンを押して何も起きないという事態防止)</p> <table> <tbody> <tr> <th>見出しセル</th><td>通常セル</td> </tr> </tbody> </table> </body> </html>
|
|