如何使用Javascript更新占位符颜色？

Question

我在网上搜索,但没有找到任何东西.我正在尝试使用javascript更新文本框的占位符颜色,但我该怎么做？我有一个颜色选择器,颜色正在改变.

如果我在CSS中有这样的东西,我该如何更新它？

::placeholder {
  color: red;
}

<input placeholder="placeholder" />

是否有javascript命令来编辑它？就像是

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

Answer 1

使用CSS变量.您也可以只定位所需的元素

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变量在修改无法使用JS访问的伪类/伪元素时非常有用,例如:before/ :after/ ::placeholer/::selection等等.您只需使用可以在元素上轻松更新的变量来定义属性.

相关:https://stackoverflow.com/a/49618941/8620333

Answer 2

正如其他答案中所述，您无法更改伪元素样式 inline。但是，您可以修改 CSS 规则本身<style>，并且不需要浏览器支持 CSS 变量。访问样式表并获取现有规则或插入您自己的规则，然后像使用元素一样使用其样式声明.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" />