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

Patricia Arquette
リリース: 2024-11-03 12:43:30
オリジナル
773 人が閲覧しました

How to Dynamically Modify CSS Class Styles in JavaScript without getElementById?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート