再読み込みしないでCSSを書き換えたい

[新着] Webテンプレートを仮オープンしました



0   名前: めぐ : 2006/04/10 12:21
過去記事から見当たらなかったので、質問させてください。

あるindex.htmlにstyle1.cssとstyle2.cssという2枚のCSSファイルを用意しています。
通常はstyle1でレイアウトをしているんですが、
画面上のボタンを押したときに、style2のcssに書き換える仕様で制作していました。

今までの方法は、ボタン押の値をCookieに保管してreload。
ページを表示するときにその値を見てcssファイルの判別をしていました。

ただこれだとどうしても表示に時間が掛かってしまうので、
もし単純にCSSを書き換える方法があれば、どなたか教えてください。

1   名前: Pid : 2006/04/10 12:21
軽くということなら JavaScript を使うことになります。

<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">

で関連付けておけば

・document.styleSheets[0]
・document.styleSheets[1]

のようにスタイル情報が格納されますので,

・document.styleSheets[0].disabled = true; // style1.css を無効
・document.styleSheets[1].disabled = true; // style2.css を無効

のようにして切り替えることができます。MSIE,Mozilla/Firefox は対応しています。ただ,Safari 1.x は読み取り専用なのと,Opera 8 以下が対応していないので,全体としてはかなりの工夫が必要です。

スタイルシート切替スクリプトはいろいろ配布されていますので,探してみて下さい。

2   名前: めぐ : 2006/04/10 12:21
返事が遅くなってスミマセン!
Pidさんのアドバイスを元にやってみたところ、
無事に解決できそうです。

本当にありがとうございました。

一覧へ戻る