プログラミング■ サンプル
実現したいことが、本当にできる事なのかを試して見ます。
スタイルシートを３つ、htmlファイルを一つ用意します。
スタイルシートの中身は、BODYタグのフォントサイズだけにしておきます。
/* cssSheetsS.css */
BODY {font-size:12px;}
/* cssSheetsM.css */
BODY {font-size:16px;}
/* cssSheetsL.css */
BODY {font-size:20px;}
■ HTML スタイルシートの指定
htmlのスタイルシートの指定はこんな感じです。
<LINK id="styleSheet" rel="Stylesheet" href="./cssSheetsS.css" type="text/css">
link要素にid属性でstyleSheetって名前を付けておきます。
■ HTML イベント
htmlには、CSS切替を行うラジオボタンを３つ用意します。
ラジオボタンの値を変更するたびに、ウィンドウサイズとスタイルシートが変更されるように作っていきます。
ラジオボタンのHTMLはこんな感じです。
<BODY>
<form name="sys_form" method="post">
<BR>
<LABEL>
<INPUT type="radio" name="displaySize" onClick="JavaScript:windowChange();">
画面サイズ ： 小
</LABEL>
<BR>
<BR>
<LABEL>
<INPUT type="radio" name="displaySize" onClick="JavaScript:windowChange();">
画面サイズ ： 中
</LABEL>
<BR>
<BR>
<LABEL>
<INPUT type="radio" name="displaySize" onClick="JavaScript:windowChange();">
画面サイズ ： 大
</LABEL>
</form>
</BODY>
ラジオボタンのクリックで「windowChange」って処理が実行されるようにします。
■ JavaScriptの中身
ラジオボタンクリック時の処理「windowChange」はこうします。
function windowChange(){
if(document.all.displaySize[0].checked){
window.resizeTo(200,250);
document.getElementById('styleSheet').href = './cssSheetsS.css';
}else if (document.all.displaySize[1].checked) {
window.resizeTo(250,300);
document.getElementById('styleSheet').href = './cssSheetsM.css';
}else if (document.all.displaySize[2].checked) {
window.resizeTo(300,350);
document.getElementById('styleSheet').href = './cssSheetsL.css';
}
}
ラジオボタンの選択値に合わせて処理を分岐しています。
まず、window.resizeToでウィンドウサイズを変更します。
次に、document.getElementByIdでスタイルシートを指定したlink要素を取得します。
そして、リンク先を指定するhrefの値を変更してやります。
これで、ウィンドウサイズの変更とスタイルシートの変更を動的に行う事が出来ます。
■ 結果
作成したhtmlの実行結果は下記の図のようになります。
うむ、実証実験は成功ですね。
ちなみに、環境はWindowsXPかWindows7で、ブラウザはIE6以降の限定で試しています。
対象がIE限定で作ったシステムなので、それ以外のテストが必要なかったのですよ。
前回：CSSをJavaScriptから変更してみた 前編
投稿記事の一覧：目次
■ 後書き
やむを得ない事情とはいえ、正直に言えばメンテナンスが大変になるような対応はしたくなかったのですが、利用者の評判は上々でした。
喜んでくれるのはエンジニアとしては嬉しいのですが、新機能の追加といった華々しい開発案件より、今回の対応とか、遅い処理をチューニングして早くした、って地道な対応の方が喜んで貰えるっていうのは、何というか複雑な思いです。
スポンサードリンク
0
0
