How to update placeholder color using Javascript?

问题

I'm searching online and I didn't find anything. I'm trying to update the placeholder color of a textbox using javascript, but how can I do that? I have a color picker and the color is changing.

If I have something like this in my CSS, how can I update it?

::placeholder {
  color: red;
}

<input placeholder="placeholder" />

Is there a javascript command to edit this? Something like

document.getElementById('text').style.placeholderColor = newColor;

回答1:

Use CSS variables. You can also target only the needed element

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>

CSS variable are useful when it comes to modify pseudo-class/pseudo-element that you cannot access with JS such as :before/:after/::placeholer/::selection, etc. You simply define your property using a variable that you can easily update on the element.

Related : Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

回答2:

As stated in the other answers, you cannot change pseudo-element styles inline. However, you can modify the CSS rule in the <style> itself, and you don't need a browser support ing CSS variables for that. Access the stylesheet and either get the existing rule or insert your own, then play with its style declarations like you would with an element .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" />

来源：https://stackoverflow.com/questions/54749402/how-to-update-placeholder-color-using-javascript

标签

javascript

html

css

pseudo-element