JavaScript CSS改変学習 第3章 スタイルシートの改変_基礎知識

コードと従来の DHTML の違いに注意してください。 DHTML では、ページ上の特定の要素を直接変更することでスタイルを変更しますが、ここでのコードはスタイル シートを変更します。
W3C DOM-CSS 互換性リストはこちらでご覧いただけます。
定義
ページには常に 1 つまたは複数のスタイル シートが含まれ、スタイル シートには 1 つまたは複数のルールが含まれ、ルールには詳細なスタイル ステートメントが含まれます。このページのスタイルシートは次のとおりです:

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

pre の白い背景を変更することです。 #EEF0F5 までテストします。

スタイル シート
すべての外部または埋め込みスタイル シートには、document.styleSheets 配列を通じてアクセスできます。 quirksmode.css、この Web サイトの一般的なスタイル シートは document.styleSheets[0] に格納されています。上記の特別なスタイル シート セクションは document.styleSheets[1] に保存されます。このコードでテストしてみましょう。
cssRules[] と rules[]
ルールは、1 つ以上の要素の宣言のセットです。ルールにアクセスするには 2 つの方法があります。 W3C は cssRules[] の使用を主張していますが、Microsoft は rules[] の使用を主張しています。どちらのメソッドもインデックス番号を使用します。最初のルールは (css)Rules[0]、2 番目のルールは (css)Rules[1] となります。

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

var theRules = new Array(); 🎜>if (document.styleSheets[1].cssRules)

theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[ 1]。 rules


TheRules にはすべてのスタイル ルールが含まれています。ルールの数
これはスタイル シートです:

コードをコピーします コードは次のとおりです: @ import url("test.css");

p,h2,h3 {

padding-right: 10px;
}
pre.test * {
margin- right: 20%;
}
pre.test {
背景色: #ffffff;
}


あなたの意見では、次の 4 つのルールになる可能性があります。次に p、h2、h3、次に pre.test *、最後に pre.test です。ただし、ブラウザではそのように認識されません。
Safari は 4 つのルールを認識します:

0、未定義
1、P
2、PRE.test[CLASSS~="test"] *
3、PRE.test[CLASSS ~=" test"]
大文字の使用に注意してください
IE7beta3 では 5 つの項目が表示されました:
0、P
1、H2
2、H3
3、PRE.test *
4.PRE .test
大文字の使用に注意してください
Mac IE にも 5 つのエントリがありました:
0、P
1、H2
2、H3
3、PRE.test * (いいえ)
4. PRE.test
大文字に注意してください
Mozilla と Opera 9 には、
0、未定義
1、p,h2,h3
2 の 4 つのエントリがありました。 .test *
3. pre.test
小文字に注意してください
大混乱!
1. IE は、p、h2、および h3 が 1 つではなく 3 つのルールであると認識しますが、Safari は p のみを受け取ります。今になって、これは間違った書き方だと気づきました。
2. Mac IE ではセレクターが pre.test * に変更されたため、意味が大きく異なります。非常に深刻な問題です。
3. Safari が pre.test に不要な式を追加することを除けば、これが最も優れたサポートを備えています。
pre.test にアクセスするには、Safari と Mozilla では cssRules[3] が必要ですが、IE では rules[4]、初期の Mozilla では cssRules[5] が必要です。とてもかわいいですね。
キーワードはありません
したがって、インデックス値を使用すると、問題は非常に深刻になります。
document.styleSheets[1].cssRules['PRE.test'] のようにアクセスできるようにして、pre のスタイル シート ルールにアクセスできるようにしたいと考えています。しかし、W3C やその他のブラウザでは、スタイル シートにアクセスするこのような方法は必要ないようです。しかし、この問題についてはすべての文書が沈黙しています。
この失敗は、基本的にルールにアクセスできないことを意味します。
スタイル宣言
ルールにアクセスできると仮定します。ここで、ステートメントの 1 つを変更する必要があります。式は次のとおりです。

コードをコピー コードは次のとおりです。 rules.style.color = '#0000cc';
W3C メソッドは次のとおりです:

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

rules.style。 setProperty(' color','#00cc00',null);

style.color の方がはるかに単純なので、この seProperty() は使いたくありません。
例
pre の色を変更する予定です。コードは次のとおりです。
確実に使用できるように、最後に pre ルールを書きました。醜いですが、これが唯一の方法です:

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

function changeIt () {
if (!document.styleSheets) return;
var theRules = new Array();
if (document.styleSheets[1].cssRules)
theRules = document. styleSheets[1 ].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[1].rules
else return; ].style .backgroundColor = '#EEF0F5';
}

翻訳アドレス: http://www.quirksmode.org/dom/changess.html
次の情報を保管してください転載禁止
著者：Beiyu (tw:@rehawk)