如何使用 JavaScript 事件監聽器動態修改 CSS 樣式？

如何使用 JavaScript 動態修改 CSS 樣式

要使用 JavaScript 動態變更元素的 CSS 屬性，可以採用多種方法。最通用的方法之一是使用元素的 style 屬性。此屬性提供對為元素定義的所有內聯樣式的存取。

考慮以下 HTML 和 CSS 片段：

<div class="left">
  Hello
</div>
<div class="center">
  <div class="left1">
<pre class="brush:php;toolbar:false">.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;
}

在此片段中，我們有三個元素（左，中、右），每個都有不同的類別。當滑鼠懸停在左側或右側元素上時，它們會將邊框顏色變更為藍色。

要讓滑鼠停留在左側時顯示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 事件的左側和右側元素。當滑鼠進入元素時，透過將其顯示樣式變更為阻止，使對應的隱藏元素可見。當滑鼠離開元素時，隱藏的元素會再次隱藏。

使用 style 屬性動態變更 CSS 屬性，可以讓您非常靈活地修改網頁中元素的外觀。