如何使用 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 属性，可以让您非常灵活地修改网页中元素的外观。