JSコントロールCSSスタイルシート_javascriptスキル

まず、CSS を制御するために JS で使用されるメソッドを記録しましょう。

1. JavaScript を使用して CSS クラスの属性を変更します。


display 属性を none から inline に変更したいとします。
解決策: IE の場合:

document.styleSheets[0].rules[0].style.display = "inline";
Firefox の場合:

document .styleSheets[ 0].cssRules[0].style.display = "inline";
説明: 特定の名前を持つスタイル オブジェクトを検索する関数を作成できます:

function getstyle(sname) {
for (var i=0;ivar rules;
if (document.styleSheets[i].cssRules) {
rules = document.styleSheets[i ] .cssRules;
} else {
rules = document.styleSheets[i].rules;
for (var j=0;j if (rules[j].selectorText == sname) {
//selectorText 属性の機能は、選択されたアドレスを置き換えることです。その意味は、RULES[J​​] の CLASSNAME を取得することです。間違っています
return rules[j].style;
}
}
}
}
それでは、

getstyle(".orig").display = "インライン";
以上です。
------------------ document.styleSheets[0].rules[0].style styleSheets[0] 配列の添字はページ番号 N を表すことに注意してください。 CSS スタイル シートでは、その下位ルール [0] の配列添字は、このスタイル シートの N 番目のスタイルを表します。例:

S ルールの変更: document.styleSheets[0].rules[0] .style.display='inline ';
W ルールを変更します: document.styleSheets[0].rules[1].style.display = 'inline';
注: CSS と HTML を組み合わせる方法は < ;LINK rel="stylesheet である必要があります。 " type="text/css" href="" /> または の場合、上記の方法は実行可能ですが、@IMPORT は実行できません。
==== ===== ===========================
次は、JS が CSS のスタイルにアクセスする方法を記録します:
JavaScript を使用してスタイルを取得および設定します
DOM 標準では、スタイル シートをオーバーライドするという概念が導入されています。 document.getElementById("id").style.backgroundColor を使用してスタイルを取得すると、id の style 属性に設定された背景色のみが取得されます。 id 背景色が style 属性に設定されていない場合、つまり、id が外部スタイル シートを参照するために class 属性を使用し、背景色がこの外部スタイルに設定されている場合は、空が返されます。シートの場合は、ごめんなさい document.getElementById(" id").style.backgroundColor この書き方は使いにくいです。外部スタイル シートの設定を取得したい場合は、メソッドの getComputedStyle() を使用する必要があります。 window オブジェクトのコードは次のように記述されます。 window.getComputedStyle(id,null).backgroundColor
しかし、Firefox ではうまく動作しますが、IE では動作しません。
この 2 つの互換性のある方法は次のとおりです。
window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor: id.currentStyle["backgroundColor"];
背景色を取得している場合、Firefox および IE のこのメソッドの戻り値IE は「#ffff99」を返しますが、Firefox は「rgb(238, 44, 34)」を返します。
window.getComputedStyle(id,null) はスタイルを設定できず、取得できるだけであることに注意してください。設定するには、次のように記述する必要があります。 id.style.background=" #EE2C21";
IE では、CURRENTSTYLE は読み取り専用モードでのみスタイルを取得できます。

この記事は、学習、インターネット検索データから抜粋、著作権なし、オリジナルと同様に自由に複製できます。作者の考えが異なる場合は、いつでもお気軽にご連絡ください。



JavaScript を使用して CSS プロパティを変更します
ネイティブ JavaScript のみを記述します。

1. JS を使用してラベルのクラス属性値を変更します。

クラス属性は、ラベルのスタイル シートを参照する方法の 1 つです。スタイルシートを変更する場合 class属性の値を変更すると、タグが参照するスタイルシートも変更されるため、これが最初の変更方法です。

タグのクラス属性を変更するコードは次のとおりです:

document.getElementById( id ).className = string;
document.getElementById( id ) は DOM を取得するために使用されます。タグ Object に対応するものは、他のメソッドを使用して取得することもできます。 className は、ラベルのクラス属性に対応する DOM オブジェクトのプロパティです。 string はクラス属性の新しい値であり、定義された CSS セレクターである必要があります。

このメソッドを使用すると、タグの CSS スタイル シートを別のスタイル シートに置き換えたり、CSS スタイルが適用されていないタグに指定したスタイルを適用したりできます。

例:

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

ようこそ!

<ボタン onclick="setClass()">スタイルを変更