Wie kann ich Platzhalterfarben mit CSS-Variablen in JavaScript dynamisch aktualisieren?

Aktualisieren der Platzhalterfarbe mit CSS-Variablen in Javascript

JavaScript fehlt eine direkte Methode zum Ändern der Platzhalterfarbe. Allerdings können CSS-Variablen verwendet werden, um diesen Effekt zu erzielen.

HTML-Code:

<input type="text" placeholder="Placeholder" />
<button onclick="update()">Change Placeholder Color</button>

CSS-Code:

::placeholder {
  color: var(--placeholder-color, red);
}

Javascript-Code:

function update() {
  const placeholderColor = document.querySelector('#color-picker').value;
  const input = document.querySelector('input[type=text]');

  input.style.setProperty("--placeholder-color", placeholderColor);
}

In diesem Skript ruft die update()-Funktion die ausgewählte Farbe von einem Farbauswahlelement ab und legt den Wert der CSS-Variablen fest – Platzhalterfarbe im Texteingabeelement. Durch Verweis auf diese Variable im CSS wird die Platzhalterfarbe dynamisch aktualisiert, wenn auf die Schaltfläche geklickt wird.

Hinweis:

• Stellen Sie sicher, dass Sie einen Farbwähler einbinden Element in Ihrem HTML-Code, damit Benutzer die neue Platzhalterfarbe auswählen können.
• Mit dieser Technik können Sie gezielt auf bestimmte Platzhalter abzielen, indem Sie den jeweiligen Eingabeelementen eindeutige CSS-Klassennamen zuweisen.

Das obige ist der detaillierte Inhalt vonWie kann ich Platzhalterfarben mit CSS-Variablen in JavaScript dynamisch aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!