getElementById を使用せずに JavaScript で CSS クラス スタイルを動的に変更する方法

getElementById を使用せずに JavaScript で CSS クラス スタイルを変更する

問題:

動的に変更する方法getElementById を使用せずに JavaScript のクラスをターゲットにして要素の CSS スタイルを取得しますか?

回答:

JavaScript では styleSheets 配列を使用して CSS スタイルを変更することもできますより効率的な方法は、目的の表示設定で個別のスタイルを作成することです。

たとえば、次のルールでスタイル シートを作成します。

.hidden {
  display: none;
}

このスタイルを要素に適用するには、remove() メソッドを使用します:

const element = document.querySelector(".hidden");
element.classList.remove("hidden");

これにより、非表示のクラスとそのスタイル ルールが削除され、要素が表示されます。

補足:

このアプローチでは DOM に新しいスタイル ルールが作成されることに注意することが重要です。このメソッドを使用すると、スタイルの柔軟性と制御が向上しますが、このメソッドを過度に使用すると、ドキュメントのメモリ使用量が肥大化する可能性があります。

以上がgetElementById を使用せずに JavaScript で CSS クラス スタイルを動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。