JavaScript を使用して外部 CSS で定義された HTML 要素スタイルを正しく変更する方法

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

ここでのタスクには、

のスタイルの変更が含まれます。要素。具体的には、関連する「ホーム」クラスがクリックされたときに背景色が緑色に変更されます。ただし、実装されたコードは不安定であるようです。

コードの欠陥:

主な問題は次の行にあります:

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

このコードは getElementsByClassName() メソッドを使用して、「ホーム」クラスを持つ要素のノード リストを取得します。ただし、結果は単一の要素ではなくノード リストになります。その結果、後続の .style = 操作は目的の要素のスタイルを変更できません。

正しいアプローチ:

色の変更を正常に適用するには、まず、スタイルを変更する必要がある特定の要素への参照。これは、より正確なメソッド querySelector() を使用して実現できます。

const homeElement = document.querySelector(".home");

このリファレンスを使用すると、スタイルの変更を効果的に実行できます。

homeElement.style.backgroundColor = "green";

Additional考慮事項:

上記のように、DOM 経由で要素に直接アクセスすることは可能であることに注意してください。イベント委任を利用するよりも効率が低くなります。さらに、最新のベスト プラクティスでは、DOM の直接操作を完全に避けることが奨励されています。スタイル設定の目的で CSS フレームワークまたはライブラリを使用することを検討してください。これにより、スタイルとロジックを分離して、コードの可読性と保守性を向上させます。

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