JavaScript はどのようにしてインタラクティブな Web デザインの CSS スタイルを動的に制御できるのでしょうか?

JavaScript を使用した動的 CSS スタイル

Web 要素の外観を動的に制御することは、インタラクティブ デザインの基礎です。これを実現するために、JavaScript は CSS プロパティをオンザフライで変更する強力なメソッドを提供します。一般的な使用例の 1 つは、ホバー時に要素の表示/非表示を切り替えることです。

提供された例を考えてみましょう。ホバーされた左の div を含む一連の div が、右の div を表示するようトリガーします。 JavaScript を使用してこれを実現するには:

1. HTML 構造を定義します: まず、3 つの div を作成します。左側の div にはコンテンツ「hello」が含まれ、中央の div には空の div が 2 つあります。 「bye1」と「bye2」という名前、およびコンテンツを含む右 div "hello2."
2. CSS イベント リスナーの追加: JavaScript を使用して、イベント リスナーを左右の div に追加します。マウスが左の div の上に移動すると、「mouseover」イベントをリッスンします。同様に、右側の div については、「mouseout」イベントをリッスンします。
3. Manipulate CSS Properties: これらのイベント ハンドラー内で、JavaScript を使用して、対応する右側の div の CSS プロパティを変更します。 。たとえば、ホバー時に「bye1」を表示するには、その「display」プロパティを「block」に設定します。

スクリプトの例を次に示します。

const leftDivs = document.querySelectorAll(".left");
const rightDivs = document.querySelectorAll(".right1");

leftDivs.forEach((leftDiv) => {
  leftDiv.addEventListener("mouseover", () => {
    rightDivs[0].style.display = "block";
  });
  leftDiv.addEventListener("mouseout", () => {
    rightDivs[0].style.display = "none";
  });
});

イベント リスナーと JavaScript を使用して CSS プロパティを操作することで、Web アプリケーションのユーザー エクスペリエンスを向上させる動的なインタラクションを作成できます。

以上がJavaScript はどのようにしてインタラクティブな Web デザインの CSS スタイルを動的に制御できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。