小编典典

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

html

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

如果我的CSS中有类似的内容,该如何更新?

::placeholder {

  color: red;

}


<input placeholder="placeholder" />

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

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

阅读 332

收藏
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