- ベストアンサー
ボタン※を押して、適用されるスタイルシートを変化させたい
ボタン※を押して、適用されるスタイルシートを変化させたい ※ボタンは画像でもテキストでも何でも結構です。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>スタイルの切り換え</title> <link id="baseStyle" rel="stylesheet" type="text/css" href="base.css" /> <link id="myStyle" rel="stylesheet" type="text/css" href="normal.css" /> <script type="text/javascript"> <!-- function changeCSS(cssname){ document.getElementById("myStyle").href = cssname + ".css"; } //--> </script> </head> <body> スタイルシートの切換<br> <button type="button" onClick="changeCSS('other')">other.css に切り換える</button> </body> </html>
その他の回答 (3)
- NTJ
- ベストアンサー率44% (46/103)
あたしはSELECTのonChangeでトラップしてスタイルシート切替、やってました。 そのときの経験から「注意すべき事」として、各スタイルシートでは、細かいレベルで全部の設定を記載する必要があります。 「createStyleSheet」は「スタイルシートの変更」ではなく「追加」なので、きっちり上書きさせないと、妙な具合になっちゃうんですね。 基本的には、 「ベースのスタイルシート」 「基本の可変項目のスタイルシート（可変項目のデフォルト）」 「規定した可変項目のみを書き換えたスタイルシート」 の３系統に分けて、最初の二つは最初から読み込み、三番目をボタンやSELECTで切替って感じにすると良好なようです。 なお、クッキーへ変更後のスタイルシート名を記憶させ、初期処理で「二番目の」と置き換えて読み込ませる構造にすると、ユーザには使い易いかもしれませんね。
- naka_hiro
- ベストアンサー率38% (32/83)
参考にでも ページが構築された後でもcreateStyleSheetを使えば現在のスタイルシートに新しくスタイルを追加することができます。追加するスタイルシートファイルをあらかじめ定義しておき「document.createStyleSheet(スタイルシートファイル名,位置)」のように指定します。同じスタイルが定義されていた場合は最初に定義されているものが優先されます。 <html> <head> <title>新しくスタイルを定義する</title> <script language="JavaScript"><!-- function setCss(cssName) { document.createStyleSheet(cssName,0); } // --></script> </head> <body> <input type="button" value="※" onClick="setCss('mycss1.css')" /><br /> <input type="button" value="※２" onClick="setCss('mycss2.css')" /><br /> <input type="button" value="※３" onClick="setCss('mycss3.css')" /><br /> ・ ・ ・ </body> </html>
ボタンじゃないけど、こういうのはいかがでしょうか？
