JS_javascript スキルを使用した CSS スタイルの変更に関する簡単な説明-jsチュートリアル-php.cn

JS_javascript スキルを使用した CSS スタイルの変更に関する簡単な説明

WBOY

リリース： 2016-05-16 17:34:33

オリジナル

1390 人が閲覧しました

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 のリアルタイム切り替えを実現できます。外部リンクスタイルの href 値を変更することでページスタイルを変更します。つまり、「テンプレートスタイルを変更する」ことです。このとき、まず、変更する必要があるターゲットに

呼び出しは非常に単純です。

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

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

コードをコピーしますコードは次のとおりです:

ドキュメントのタイトル

次の例に示すように、これを宣言領域に追加する必要があります。 🎜>
< 🎜>HTML ドキュメントのとタグの間に

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

コードをコピーしますコードは次のとおりです:

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

 

ここでスタイル オブジェクトの type 属性を「text/css」に設定すると、ブラウザはこのタイプをサポートします。 

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

この行は左右の外側パッチで追加されます

< p>