外部でスタイル設定された HTML 要素のスタイルを JavaScript で動的に変更するにはどうすればよいですか?

JavaScript を使用して外部でスタイル設定された HTML 要素のスタイルを変更する

CSS を使用して外部でスタイル設定された HTML 要素を操作する場合、多くの場合、JavaScript を使用して外観を動的に変更する必要があります。これを実現する 1 つのアプローチは、要素の 'style' 属性を操作することです。

通常、これは、ID またはクラスを使用して要素を参照し、必要なスタイル プロパティと値を要素の style 属性に追加することによって行われます。 。ただし、要素を見つけるために使用される特定の方法によっては、微妙な点が発生する可能性があります。

提供されたコードのエラー

次の例を考えてみましょう:

<p class="home" onclick="selectHome()">Home</p>

function selectHome() {
  document.getElementsByClassName("home").style += "background-color:green;";
}

ここでの目的は、クリック時に段落 (クラス「home」を持つ) の背景色を緑色に変更することです。ただし、このコードは構文が間違っているために失敗することがよくあります。

構文の修正

スタイルを正しく変更するには、次の構文を使用します:

document.querySelector(".home").style.backgroundColor = "green";

• 。 querySelector() は、指定されたクラスに一致する単一の要素を見つけます。 ("home").
• .style は要素のスタイル オブジェクトへのアクセスを提供します。
• .style.backgroundColor は背景色のプロパティを設定します。

の利点。 querySelector()

の代わりに .querySelector() を使用する.getElementsByClassName() にはいくつかの利点があります。

• 最初に一致した要素への参照を返し、不必要な検索やリスト処理を回避します。
• 「静的」参照を作成します。 DOM は要素に対して 1 回だけスキャンされるため、パフォーマンスが向上します。
• よりも簡潔でパフォーマンスが優れています。

追加の考慮事項

• 複数の要素を変更するには、.querySelector() の代わりに .querySelectorAll() を使用します。
• 外部 CSS がルールは、JavaScript を通じて適用されるインライン スタイルをオーバーライドしません。
• インライン スタイルを強制的に優先させるために必要な場合は、CSS 内の !重要なフラグ。

以上が外部でスタイル設定された HTML 要素のスタイルを JavaScript で動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。