スタイルが外部で定義されている場合に、JavaScript を使用して HTML 要素のスタイルを正しく変更する方法

JS を使用して HTML 要素のスタイルを変更する方法 (CSS を使用して外部でスタイル設定)?

JavaScript を使用して HTML 要素のスタイルを変更しようとすると、次のような問題が発生する可能性があります。問題。ここでは、

の背景色を変更するシナリオを示します。クラス「home」を持つ要素をクリックすると、その要素が緑色に変わります。ただし、これは期待どおりに機能しません。この問題の考えられる原因を調べてみましょう。

元のコード:

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

問題: getElementsByClassName の使用とスタイル プロパティの変更

この問題は、getElementsByClassName の使用と不適切な変更方法に起因します。スタイル。問題の内訳は次のとおりです。

1. getElementsByClassName: を使用すると、getElementsByClassName はライブ ノード リストを返します。これは、DOM が変更されると動的に更新されることを意味します。ただし、ここで必要なのは、最新のリストではなく、最初に一致した要素への参照だけです。
2. スタイル プロパティの変更: スタイル プロパティを文字列として変更します (例: 、style = "background-color:green;") は推奨される方法ではありません。これはエラーが発生しやすく、意図しない副作用を引き起こす可能性があります。

解決策: querySelector と CSS プロパティの設定

より良い方法は、querySelector を使用して、必要な要素を参照し、その CSS プロパティを変更します直接:

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

querySelector の利点:

• 非ライブ ノードの戻り値: querySelector は、ノードではなく単一のノードを返します。潜在的なパフォーマンスを回避するライブ ノード リスト
• 一貫性: 要素を選択および変更するための、より一貫性のある信頼性の高い方法が提供されます。

要素のスタイルを変更するときは、スタイル プロパティを変更するために文字列連結を使用するのではなく、CSS プロパティを直接設定するベスト プラクティスです。このアプローチにより明確さが確保され、将来のメンテナンスが簡素化されます。

以上がスタイルが外部で定義されている場合に、JavaScript を使用して HTML 要素のスタイルを正しく変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。