1.スタイルを部分的に変更する
スタイルを直接変更する方法、classNameを変更する方法、cssTextを変更する方法の3つがあります。
クラス名を変更します: document.getElementById('obj').className="…"
cssText を変更します: document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";
直接スタイルを変更します: document.getElementById('obj').style.backgroundColor="#003366″
2. スタイルを全体的に変更する
Web ページのスタイルのリアルタイム切り替えは、外部リンク スタイルの href 値を変更する、つまり「テンプレート スタイルを変更する」ことで実現されます。
まず、変更する必要があるターゲットに ID を与える必要があります。
次のようにコードをコピーします。
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />
呼び出し方は非常に簡単です。
次のようにコードをコピーします。
<span onclick="javascript:document.getElementById('css').href='ie.css'">クリックしてスタイルを変更してください</span>