既存のスタイルを上書きせずに JavaScript で CSS 宣言オブジェクトを変更する方法

CSS 宣言オブジェクトへのアクセスと変更

Web 開発では、インライン スタイルを使用せずに CSS スタイルを変更する必要が生じる場合があります。既存のスタイルを上書きし、機能を中断する可能性があります。この記事では、JavaScript を使用して CSS 宣言オブジェクトにアクセスし、変更する方法を説明します。

次の CSS コードについて考えてみましょう:

<code class="css">.box {
  color: green;
}

.box:hover {
  color: blue;
}</code>

この CSS は、マウスを置くと青に変わる緑色のテキストを含むボックスを作成します。ただし、色のインライン スタイルを適用すると、ホバー動作が失われます。

<code class="html"><div class="box" style="color: red;">TEXT</div></code>

この問題を回避するには、CSS 宣言オブジェクトにアクセスして、それを直接変更します。 JavaScript は、スタイルシートに対応する DOM スタイルシート オブジェクトに cssRules プロパティを提供します。このプロパティを使用して、すべての CSS ルールの配列を取得できます。

CSS ルールを変更するには、ルール オブジェクトの style プロパティを使用できます。たとえば、ボックスの色を赤に変更するには、次の JavaScript を使用できます:

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';</code>

IE では cssRules の代わりにルールが使用されることに注意してください。

のデモをご覧いただけます。このテクニックは http://jsfiddle.net/8Mnsf/1/ にあります。

以上が既存のスタイルを上書きせずに JavaScript で CSS 宣言オブジェクトを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。