web-dev-qa-db-fra.com

Comment mettre à jour la couleur de l'espace réservé à l'aide de Javascript?

Je recherche en ligne et je n'ai rien trouvé. J'essaie de mettre à jour la couleur de l'espace réservé d'une zone de texte à l'aide de javascript, mais comment faire? J'ai un sélecteur de couleurs et la couleur change.

Si j'ai quelque chose comme ça dans mon CSS, comment puis-je le mettre à jour?

::placeholder {
  color: red;
}
<input placeholder="placeholder" />

Existe-t-il une commande javascript pour modifier cela? Quelque chose comme

document.getElementById('text').style.placeholderColor = newColor;
javascripthtmlcsspseudo-element
23
Manuel Rizzo

Utilisez des variables CSS. Vous pouvez également cibler uniquement l'élément nécessaire

function update() {
  document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}
::placeholder {
  color: var(--c, red);
}
<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>

Les variables CSS sont utiles lorsqu'il s'agit de modifier des pseudo-classes/pseudo-éléments auxquels vous ne pouvez pas accéder avec JS tels que :before/:after/::placeholer/::selection, etc. Vous définissez simplement votre propriété à l'aide d'une variable que vous pouvez facilement mettre à jour sur l'élément.

Connexes: Sélection et manipulation de pseudo-éléments CSS tels que :: avant et :: après l'utilisation de jQuery

33
Temani Afif

Comme indiqué dans les autres réponses, vous ne pouvez pas modifier les styles de pseudo-élément en ligne . Cependant, vous pouvez modifier la règle CSS dans le <style> lui-même, et vous n'avez pas besoin d'un navigateur prenant en charge les variables CSS pour cela. Accédez à la feuille de style et récupérez la règle existante ou insérez la vôtre, puis jouez avec ses déclarations de style comme vous le feriez avec un élément .style:

const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";

Object.assign(document.body.appendChild(document.createElement("input")), {
  type: "button", value: "Color!", onclick() {
    placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});
<input placeholder="placeholder" />
4
Bergi