ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript で CSS スタイルを変更する style_javascript のヒント

JavaScript で CSS スタイルを変更する style_javascript のヒント

WBOY
WBOYオリジナル
2016-05-16 19:05:081579ブラウズ

1. スタイルの部分変更
は、直接スタイルの変更、classNameの変更、cssTextの変更の3種類に分かれます。注意する必要があるのは次のとおりです:
大文字の使用に注意してください:
JavaScript は大文字の使用に非常に敏感です。ClassName は "N" を "n" として書くことはできません。また、cssText は "T" を "t" として書くことはできません。効果は実装できません。
メソッドの呼び出し:
className を変更する場合は、事前にスタイル シートでクラスを宣言しますが、呼び出し時にスタイルに従わないようにします (document.getElementById('obj').style.className=”…” 誤り) ! document.getElementById('obj').className="..."
Change cssText
ただし、cssText を使用する場合、正しい書き方は次のとおりです。 document.getElementById('obj') .style.cssText=”…”

直接スタイルの変更について話す必要はありません。
document などの特定のスタイルを記述することを忘れないでください。 getElementById('obj').style.backgroundColor= ”#003366″

2. スタイルをグローバルに変更します
通常、Web ページのスタイルのリアルタイムの切り替えは、外部リンクのスタイル、つまり「テンプレートのスタイルの変更」。このとき、まず、変更する必要があるターゲットに


などの ID を与える必要があります。

スタイルを変更するにはクリックしてください 初心者は JavaScript で特定の CSS スタイルを記述する方法がわからないことが多く、ブラウザによって要件が異なる場合があります。たとえば、Float は IE では styleFloat、FIREFOX では cssFloat と書きますが、これには全員の蓄積が必要です。 Google で「ccvita javascript」を検索すると、疑問が解決するかもしれません。


基礎知識
Web ページでスタイルシートを呼び出す方法は通常 3 つあります。
最初の方法: 外部スタイル シート ファイルへのリンク (スタイル シートへのリンク)
最初に外部スタイル シート ファイル (.css) を作成してから、HTML リンク オブジェクトを使用できます。例は次のとおりです。



Document Title

XML では次のようになります。以下の例 宣言領域に示すように、


2 番目: 内部スタイル ブロック オブジェクトの定義 (スタイル ブロックの埋め込み)
の タグと タグの間に追加できます。 HTML ドキュメントに


ブロック オブジェクトを挿入します。定義方法については、スタイルシートの構文を参照してください。例は次のとおりです。




ドキュメントのタイトル body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; フォントの太さ: 太字; 色: 栗色} h2 {font: 13pt/15pt "Arial "; font -weight: 太字; color: ブルー}
p {font: 10pt/12pt "Arial"; color: black} -->






スタイル オブジェクトの type 属性を "text/css" に設定すると、このタイプをサポートしていないブラウザはスタイル シートを無視できることに注意してください。

3 番目のタイプ: インライン定義 (インライン スタイル)

インライン定義では、オブジェクトのマーク内でオブジェクトのスタイル属性を使用して、それに適用されるスタイル シート属性を定義します。例は次のとおりです。

この行は、左右の外側のパッチ で追加されます。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。