jsでCSSを動的に変更する

フロントエンド テクノロジの継続的な開発により、JavaScript は Web 開発に不可欠な部分になりました。 JavaScript では、CSS スタイルを動的に変更することが一般的な要件の 1 つであり、マウスをホバーしたときの特殊効果や、ページがスクロールしたときにナビゲーション バーの色が変化するなど、多くの優れた効果を実現できます。この記事ではJavaScriptでCSSスタイルを動的に変更する方法を詳しく紹介します。

1. JavaScript を使用して要素のスタイルを変更する

HTML では、要素に CSS スタイルを追加することでページを美しくすることができます。 JavaScript では、要素の属性を変更することで、スタイルを動的に変更する効果を実現できます。

1. 要素の style 属性の使用

HTML 要素の style 属性を使用して、要素のスタイルを直接変更できます。このメソッドは、単一要素のスタイルを変更するのに適しています。

サンプル コード:

<div id="box" style="background-color: green;">我是一段文本</div>

JavaScript では、要素の style 属性を取得することでスタイルを動的に変更できます:

var box = document.querySelector('#box');
box.style.backgroundColor = 'red';

JavaScript でスタイルを変更した後、スタイル要素の部分が赤くなります。

2. 要素の style 要素の使用

要素のスタイルを動的に変更するもう 1 つの方法は、要素の style 要素を使用することです。 style 要素を使用すると、JavaScript で要素のスタイル シートに直接アクセスし、そのスタイルを変更できます。

サンプル コード:

<div id="box"></div>

<style>
    #box {
        background-color: green;
    }
</style>

JavaScript では、要素の style 属性を取得することでスタイル要素を取得し、そのスタイルを動的に変更できます:

var box = document.querySelector('#box');
var styles = box.style;

// 修改样式
styles.backgroundColor = 'red';

Modify it JavaScript 経由 スタイル設定後、要素のスタイルが赤に変わります。

2. classList を使用してスタイルを変更する

上で紹介した 2 つのメソッドは、Web ページ上の複数の要素のスタイルを制御する必要がある場合、単一要素のスタイルを変更するのに適しています。場合によってはこの２つの方法 この方法は面倒そうです。この時点で、classList 属性を使用してスタイルを動的に変更できます。

1. クラスの追加と削除

classList 属性には、クラスを簡単に追加および削除できる便利なメソッドが多数含まれています。クラスを使用すると、要素のスタイルのセットを定義し、JavaScript を介してそれらを動的に追加または削除できます。

サンプル コード:

<div class="box">我是一段文本</div>

JavaScript では、classList の add() メソッドとremove() メソッドを使用して要素のクラスを追加または削除できます。

var box = document.querySelector('.box');
box.classList.add('red');
box.classList.remove('box');

JavaScript による変更スタイルを設定すると、要素のスタイルが赤になり、要素のボックス クラスが削除されます。

2. Toggle class

add() メソッドと Remove() メソッドに加えて、classList には toggle() という便利なメソッドもあります。 toggle() メソッドは要素のクラスを切り替えることができ、要素内にクラスが既に存在する場合はそのクラスを削除し、そうでない場合はクラスを追加します。

サンプル コード:

<div class="box">我是一段文本</div>

JavaScript では、classList の toggle() メソッドを使用して要素のクラスを切り替えることができます:

var box = document.querySelector('.box');
box.classList.toggle('red');
box.classList.toggle('green');

JavaScript でスタイルを変更した後、要素のクラス スタイルが赤から緑に変わります。

3. スタイル シートを直接変更する

上記の方法では、単一要素または複数の要素のスタイルを制御できますが、スタイル シートを直接変更する必要がある場合は、別の方法。

JavaScript では、スタイル シートはオブジェクトとして表現され、JavaScript コードを通じてその中のスタイルを動的に変更して、スタイル シートの動的変更を実現できます。

サンプル コード:

<div class="box">我是一段文本</div>

JavaScript では、スタイル シートに対応するオブジェクトを取得することで、スタイルを動的に変更できます。

var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules;

for (var i = 0; i < rules.length; i++) {
    var rule = rules[i];
    if (rule.selectorText === '.box') {
        rule.style.backgroundColor = 'red';
    }
}

JavaScript でスタイルを変更した後、要素のスタイル スタイルが赤色に変わります。

4. 概要

この記事では、要素の style 属性の使用、要素の style 要素の使用、classList の使用など、CSS スタイルを動的に変更する 3 つの方法を紹介します。また、スタイルシートを直接変更したいというニーズに応えるため、スタイルシートを直接変更する方法も導入しました。これらのメソッドを使用すると、CSS スタイルを動的に変更する機能を JavaScript で簡単に実装できます。

以上がjsでCSSを動的に変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。