JavaScript で CSS クラスのプロパティを動的に管理するにはどうすればよいですか?

JavaScript を使用してクラスの CSS を変更する方法

CSS クラスを使用する場合、動的に管理する必要がある状況に遭遇することがあります。 JavaScript を使用してプロパティを設定します。この質問では、getElementById を使用して要素 ID に依存するのではなく、特にクラスの CSS を変更する最も効果的な方法を検討します。

解決策

スタイル ルールを変更し、styleSheets 配列を使用して特定のクラスを変更することは推奨されません。答えが示すように、よりクリーンで保守しやすい解決策は、表示目的ごとに個別のスタイル ルールを保守することです。

たとえば、JavaScript を使用して要素の表示を切り替える代わりに、2 つのスタイル ルールを作成できます。は、display: none を定義し、もう 1 つは、display: inline を定義します。要素を非表示にしたい場合は、ターゲット クラスに「display-none」スタイル ルールを適用するだけです。再び表示できるようにするには、「display-none」スタイル ルールを削除し、「display-inline」スタイル ルールを適用します。

実装

<code class="html"><!-- Create two style rules -->
<style>
  .display-none {
    display: none;
  }

  .display-inline {
    display: inline;
  }
</style></code>

<code class="javascript">// Hide an element
document.getElementById('element-id').classList.add('display-none');

// Make it visible again
document.getElementById('element-id').classList.remove('display-none');
document.getElementById('element-id').classList.add('display-inline');</code>

このアプローチでは、さまざまな表示目的に合わせて複数のスタイル ルールを作成し、JavaScript を使用してそれらを簡単に切り替えることができるため、柔軟性と保守性が向上します。

以上がJavaScript で CSS クラスのプロパティを動的に管理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。