Comment puis-je mettre à jour dynamiquement la couleur de l'espace réservé avec des variables CSS en JavaScript ?

Mise à jour de la couleur de l'espace réservé avec des variables CSS en Javascript

JavaScript ne dispose pas d'une méthode directe pour modifier la couleur de l'espace réservé. Cependant, des variables CSS peuvent être utilisées pour obtenir cet effet.

Code HTML :

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

Code CSS :

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

Code Javascript :

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

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

Dans ce script, la fonction update() récupère la couleur sélectionnée à partir d'un élément sélecteur de couleur et définit la valeur de la variable CSS --placeholder-color dans l'élément de saisie de texte. En référençant cette variable dans le CSS, la couleur de l'espace réservé est mise à jour dynamiquement lorsque vous cliquez sur le bouton.

Remarque :

• Assurez-vous d'inclure un sélecteur de couleur élément dans votre HTML pour permettre aux utilisateurs de sélectionner la nouvelle couleur d'espace réservé.
• En utilisant cette technique, vous pouvez cibler des espaces réservés spécifiques en attribuant une classe CSS unique noms des éléments d'entrée respectifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!