Wie ändere ich CSS-Stile dynamisch mit JavaScript-Ereignis-Listenern?

So ändern Sie CSS-Stile dynamisch mit JavaScript

Um die CSS-Eigenschaften eines Elements mithilfe von JavaScript dynamisch zu ändern, können mehrere Methoden eingesetzt werden. Einer der vielseitigsten Ansätze besteht darin, die style-Eigenschaft des Elements zu verwenden. Diese Eigenschaft bietet Zugriff auf alle für das Element definierten Inline-Stile.

Bedenken Sie das folgende HTML- und CSS-Snippet:

<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;
}

In diesem Snippet haben wir drei Elemente (links, Mitte und rechts), jeweils mit unterschiedlichen Klassen. Wenn der Mauszeiger über die linken oder rechten Elemente bewegt wird, ändern sie ihre Rahmenfarbe in Blau.

Damit das Element left1 angezeigt wird, wenn der Mauszeiger nach links bewegt wird, und das Element right1, wenn der Mauszeiger nach rechts bewegt wird, können wir JavaScript verwenden:

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';
});

In diesem JavaScript-Code verwenden wir die Methode addEventListener, um Ereignis-Listener an die linken und rechten Elemente für die Ereignisse „Mouseenter“ und „Mouseleave“ anzuhängen. Wenn die Maus das Element betritt, wird das entsprechende ausgeblendete Element sichtbar gemacht, indem sein Anzeigestil in „Blockieren“ geändert wird. Wenn die Maus das Element verlässt, wird das ausgeblendete Element wieder ausgeblendet.

Die Verwendung der Style-Eigenschaft zum dynamischen Ändern von CSS-Eigenschaften bietet Ihnen große Flexibilität beim Ändern des Erscheinungsbilds von Elementen auf Ihren Webseiten.