1.スタイルを部分的に変更する
ダイレクトスタイルの変更、classNameの変更、cssTextの変更の3種類があります。注意すべき点は次のとおりです。
大文字と小文字の区別に注意してください。
JavaScript では大文字と小文字が非常に区別されます。ClassName では "N" を "n" として記述することはできません。また、cssText では "T" を "t" として記述することはできません。そうしないと、効果が得られません。
呼び出し方法:
classNameを変更する場合は、事前にスタイルシートでクラスを宣言し、呼び出し時にスタイルに従わないでください。 document.getElementById('obj').style.className="..." のように書くのは間違いです。 document.getElementById('obj').className="…" のようにのみ記述できます。
cssテキストを変更する
ただし、cssText を使用する場合は、スタイルを追加する必要があります。正しい記述方法は次のとおりです。 document.getElementById('obj').style.cssText=”…”
直接スタイルの変更について話す必要はありません。次のような特定のスタイルを書き留めることを忘れないでください。
次のようにコードをコピーします。
document.getElementById('obj').style.backgroundColor=”#003366″
2. スタイルを全体的に変更する
通常、Web ページのスタイルのリアルタイム切り替えは、外部リンク スタイルの href 値を変更する、つまり「テンプレート スタイルを変更する」ことで実現できます。現時点では、まず変更する必要があるターゲットに ID を与える必要があります。
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
呼び出し方は非常に簡単です。
<span on click="javascript:document.getElementById('css').href = 'ie.css'">スタイルを変更するにはクリックしてください</span>
初心者は JavaScript で特定の CSS スタイルを記述する方法がわからないことが多く、ブラウザによって要件が異なる場合もあります。たとえば、Float は IE では styleFloat、FIREFOX では cssFloat と記述されますが、これには全員の蓄積が必要です。 Google で「ccvita javascript」を検索すると、疑問が解決するかもしれません。
基礎知識
通常、Web ページでスタイル シートを呼び出す方法は 3 つあります。
1つ目：外部スタイルシートファイルへのリンク（スタイルシートへのリンク）
まず外部スタイル シート ファイル (.css) を作成してから、HTML リンク オブジェクトを使用できます。例は次のとおりです。
次のようにコードをコピーします。
<頭>
<title>ドキュメントのタイトル</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
XML では、次の例に示すように宣言領域に追加します。
次のようにコードをコピーします。
< ?xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
2 番目のタイプ: 内部スタイル ブロック オブジェクトの定義 (スタイル ブロックの埋め込み)
を挿入できます
ブロックオブジェクト。 定義方法については、スタイルシートの構文を参照してください。例は次のとおりです。
次のようにコードをコピーします。
<html>
<頭>
<title>ドキュメントのタイトル</title>
<style type="text/css">
<!--
本文 {font: 10pt "Arial"}
h1 {フォント: 15pt/17pt "Arial"; フォントの太さ: 栗色;
h2 {フォント: 13pt/15pt "Arial"; フォントの太さ: 太字;
p {フォント: 10pt/12pt "Arial"; カラー: 黒}
-->
</スタイル>
</head>
<本文>
</body></html>
スタイル オブジェクトの type 属性を「text/css」に設定すると、このタイプをサポートしていないブラウザはスタイル シートを無視できることに注意してください。
3 番目のタイプ: インライン定義 (インライン スタイル)
インライン定義では、オブジェクトのマークアップ内でオブジェクトの style 属性を使用して、それに適用されるスタイル シート属性を定義します。例は次のとおりです。
次のようにコードをコピーします。
<p style="margin-left: 0.5in; margin-right:0.5in">この行には左右の外側パッチが追加されています</p><p> </p>