記事参照
No.2 2006/08/30 09:00
題：Re: 文字サイズをボタンで変更したい
名：カヅサツ
あえて全サンプルを掲載してみる
<!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>
掲示板に戻る