Javascript は CSS スタイルを変更します (ローカルおよびグローバル)

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>