javascript - 如何使用 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 等。您只需定义您可以在主元素上轻松更新的自定义属性，伪元素将继承它。

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