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

一尘不染

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

html

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

如果我的CSS中有类似的内容，该如何更新？

::placeholder {

  color: red;

}


<input placeholder="placeholder" />

是否有JavaScript命令可以对此进行编辑？就像是

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

阅读 252

2020-05-10

共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等）时非常有用。您只需使用可以轻松在元素上更新的变量来定义属性。

2020-05-10