JavaScript イベントリスナーを使用して CSS スタイルを動的に変更する方法

JavaScript を使用して CSS スタイルを動的に変更する方法

JavaScript を使用して要素の CSS プロパティを動的に変更するには、いくつかの方法を使用できます。最も汎用性の高いアプローチの 1 つは、要素の style プロパティを使用することです。このプロパティは、要素に定義されているすべてのインライン スタイルへのアクセスを提供します。

次の HTML および CSS スニペットを考えてみましょう:

<div class="left">
  Hello
</div>
<div class="center">
  <div class="left1">

.left,
.right {
  margin: 10px;
  float: left;
  border: 1px solid red;
  height: 60px;
  width: 60px;
}

.left:hover,
.right:hover {
  border: 1px solid blue;
}

.center {
  float: left;
  height: 60px;
  width: 160px;
}

.center .left1,
.center .right1 {
  margin: 10px;
  float: left;
  border: 1px solid green;
  height: 60px;
  width: 58px;
}

このスニペットには、3 つの要素があります (左、中央、右)、それぞれに異なるクラスがあります。左または右の要素にマウスを置くと、境界線の色が青に変わります。

左にマウスを置くと left1 要素が表示され、右にマウスを置くと right1 要素が表示されるようにするには、JavaScript を使用します。

document.querySelector('.left').addEventListener('mouseenter', () => {
  document.querySelector('.left1').style.display = 'block';
});

document.querySelector('.left').addEventListener('mouseleave', () => {
  document.querySelector('.left1').style.display = 'none';
});

document.querySelector('.right').addEventListener('mouseenter', () => {
  document.querySelector('.right1').style.display = 'block';
});

document.querySelector('.right').addEventListener('mouseleave', () => {
  document.querySelector('.right1').style.display = 'none';
});

この JavaScript コードでは、addEventListener メソッドを使用して、mouseenter イベントと Mouseleave イベントの左右の要素にイベント リスナーを接続します。マウスが要素に入ると、対応する非表示要素の表示スタイルがブロックに変更されて表示されます。マウスが要素から離れると、非表示の要素は再び非表示になります。

スタイル プロパティを使用して CSS プロパティを動的に変更すると、Web ページ内の要素の外観を非常に柔軟に変更できます。

以上がJavaScript イベントリスナーを使用して CSS スタイルを動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。