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

Answer 2

如其他答案所述，您不能change pseudo-element styles inline。但是，您可以在<style>本身中修改CSS规则，并且不需要浏览器来支持CSS变量。访问stylesheet并获取现有的rule或插入自己的style declarations，然后像使用元素.style一样使用其{{3}}：

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" />

Answer 3

还有另一种方法，但有点怪异：使用JS将更多CSS附加到正文末尾。假设规则相同，浏览器将使用最新的CSS覆盖当前CSS。

function changeColor(toColor) {
  addCSS = document.createElement('style');
  addCSS.innerHTML = "::placeholder { color: " + toColor + "; }";
  document.body.append(addCSS);
}

::placeholder { color: green; }

<input type="text" placeholder="placeholder">
<button onclick="changeColor('red')">red</button>
<button onclick="changeColor('blue')">blue</button>

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

3 个答案: