Wie modifiziere ich dynamisch die Schwebefarbe von HTML -Elementen, indem Sie auf die Schaltfläche klicken?

Verwenden von CSS

In diesem Artikel wird vorgestellt, wie die Schwebefarbe von HTML -Elementen dynamisch geändert wird, indem Sie auf eine Schaltfläche klicken, um das interaktive Web -Erlebnis zu verbessern. Wir werden CSS -Variablen und JavaScript verwenden, um diese Funktionalität zu implementieren.

Das Ziel ist: Klicken Sie auf die Schaltfläche, um den vorhandenen Element -Schwebstil zu ändern. Dazu verwenden wir CSS -Variablen, um die Schwebefarbe zu definieren und den Wert der CSS -Variablen in der Schaltfläche zu ändern. Klicken Sie über JavaScript.

Implementierungsplan:

Erstens enthält die HTML-Struktur das Zielelement ( .element ) und mehrere Schaltflächen ( .change-color ), wobei jede Taste einer Schwebefarbe entspricht:

<div class="container">
  <div class="element"></div>
  <button class="change-color">Rot</button>
  <button class="change-color">Grün</button>
  <button class="change-color">Blau</button>
</div>

Der CSS -Stil definiert den grundlegenden Stil des Elements und verwendet die CSS -Variable --color , um die Schwebefarbe zu steuern, Standardsrot:

 .Element {
  Breite: 100px;
  Höhe: 100px; /* Aspektverhältnis ist nicht mit allen Browsern kompatibel, in feste Höhe geändert*///
  Rand: 20px;
  Hintergrundfarbe: Lightgray; /* Hintergrundfarbe hinzufügen, um den Effekt zu beobachten*/
}

.Element: Hover {
  Hintergrund: var (-Farbe, rot);
}

Schließlich hört der JavaScript -Code für jede Schaltfläche auf. Klicken Sie auf Ereignis. Nehmen Sie nach dem Klicken auf die Schaltfläche den Schaltflächentextinhalt (Farbname) und weisen Sie den Farbwert der CSS -Variablen --color mit el.style.setProperty() zu:

 const el = document.querySelector (". Element");

Document.querySelectorAll (". Change-Color"). foreach (e => {
  E.AddeventListener ("Click", () => {
    El.Style.SetProperty ("-Color", E.TextContent);
  });
});

Durch die kollaborative Arbeit von HTML, CSS und JavaScript können Sie die Funktion des dynamischen Änderns der Schwebefarbe von HTML -Elementen erkennen, indem Sie auf eine Schaltfläche klicken. Diese Methode ist einfach, effizient und einfach zu warten.

Das obige ist der detaillierte Inhalt vonWie modifiziere ich dynamisch die Schwebefarbe von HTML -Elementen, indem Sie auf die Schaltfläche klicken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!