Comment modifier dynamiquement la couleur de l'espace réservé avec JavaScript ?

Manipulation de la couleur de l'espace réservé avec JavaScript

Déterminer comment modifier la couleur de l'espace réservé d'une zone de texte via JavaScript peut être déroutant. Bien que le sélecteur ::placeholder puisse être utilisé en CSS pour définir la couleur de l'espace réservé, il ne semble pas y avoir d'équivalent JavaScript immédiat.

Solution : Variables CSS

Une solution viable consiste à exploiter les variables CSS. Voici comment y parvenir :

1. Définissez la variable CSS :

:root {
  --placeholder-color: red;
}

Cela crée une variable CSS nommée --placeholder-color avec une valeur initiale de rouge.

2. Appliquer la variable à l'espace réservé :

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

En référençant la variable --placeholder-color à l'intérieur de la règle ::placeholder, la couleur de l'espace réservé héritera désormais de la valeur définie dans l'élément racine.

3. Mettre à jour la variable dynamiquement :

document.querySelector('input[type=text]').style.setProperty("--placeholder-color", "blue");

À l'aide de JavaScript, vous pouvez mettre à jour dynamiquement la valeur de la variable --placeholder-color, ce qui changera ensuite la couleur de l'espace réservé dans toutes les correspondances. éléments.

Exemple :

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

function update() {
  document.querySelector('input[type=text]').style.setProperty("--placeholder-color", "blue");
}

Avantages :

• Permet des changements de couleur précis pour éléments spécifiques.
• Permet l'interactivité et le dynamisme mises à jour.
• Prend en charge la compatibilité avec les principaux navigateurs.

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!