外部ＣＳＳを切り替えながらデザインを変化させるセレクトフォーム

質問

同一ページについて外部スタイルシートを切り替えてデザインを変更できるhtmlページを作っています。このたびデザインをそのhtml上から変更できるようにしたく、ページ内にselect形式のフォームを設け、そこで外部ＣＳＳを選択すると選んだＣＳＳが適用され、画面のデザインがそのたびに替わるという機能を付けたいと思いますが、そういったことは可能でしょうか？ご存じの方がいらっしゃいましたら是非お教えいただきたく、宜しくお願いいたします。

回答No.2

BLUEPIXY · ベストアンサー

外部スタイルシートを読み込む時に
<link rel="stylesheet" type="text/css" href="normal.css" />
とか、書いていると思いますが、
<link>にidを付けてやって
<link id="changeStyle" rel="stylesheet" type="text/css" href="normal.css" />
などとしてやれば
document.getElementById("changeStyle").href="change1.css";
とかしてやることで動的にスタイルシートを切り換えることが可能です。
selectのonchangeイベントで、選ばれた値によってこのようにして切り換えてやれば良いです。

お礼

詳しく対処法を教えていただき、有り難うございます。
おかげさまで、思いどおりの処理を実現することができました。

ただ、ＩＥではＯＫですが、ネットスケープでテストするとスタイルシートが切り替わりません。いろいろ試してみましたが、同じ結果です。これは仕様で仕方がないのかなとも思いましたが、もし何か判ることがありましたら恐れ入りますが教えていただけましたら幸いです。ちなみにネットスケープはバージョン７．１で、JavaScriptはもちろん有効にしてテストいたしました。

ご参考までに試した内容は下記の通りです。

（ヘッダー部）
<link id="changeStyle" REL="stylesheet" type="text/css" href="css1.css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

　（プログラム）
<script type="text/javascript">
function cgcss(){
document.getElementById("changestyle").href=cssfo.csssel.value ;
}
</script>

　（フォーム部）
<form name="cssfo">
<select name="csssel" onChange= "cgcss()">
<option value="css1.css" selected>スタイルシート１
<option value="css2.css">スタイルシート２
</select>
</form>

まずは取り急ぎ御礼かたがたご報告とさせていただきます。

回答No.3

BLUEPIXY

document.getElementById("changestyle").href=cssfo.csssel.value ;
の
changestyle
を
changeStyle
にしてみるとどうでしょう？

お礼

プログラムまで詳しく見ていただき有り難うございます。このたびはご面倒をおかけし恐縮です。
さて、いろいろ試すなかで、cssfo.csssel.value ;の頭にdocument.をつけてみたらネットスケープでも動作しましたのでまずはご報告いたします。
せっかくバグを見つけていただいたのに、私の知識不足のため、ご面倒をおかけしてしまい、まことに申し訳ありません。
おかげさまで所期の目的を達成することができました。本当に有り難うございました。

回答No.1

moon_night

Javascriptを使用してやれば可能。
クッキーを使えば選択デザインの保存もできて、次回きたときでも設定を維持できます。

お礼

早速ご回答をいただき、有り難うございます。