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

【问题标题】：How to update placeholder color using Javascript?如何使用 Javascript 更新占位符颜色？
【发布时间】：2019-07-11 23:05:58
【问题描述】：

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

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

::placeholder {
  color: red;
}

&lt;input placeholder="placeholder" /&gt;

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

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

【问题讨论】：

标签： javascript html css pseudo-element

【解决方案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 等。您只需定义您可以轻松更新的自定义属性元素和伪元素将继承它。

【讨论】：

@MelMacaluso 对于 ie11 版本，我们可以使用我们切换的包含颜色的类（虽然不是很灵活）
@DogukanCavus red 是默认值...单击按钮时蓝色将设置为仅第一个
@TemaniAfif 当然可以，我在暗示我们如何灵活地做到这一点啊啊啊
我见过的现代浏览器的最佳解决方案。谢谢

【解决方案2】：

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

&lt;input placeholder="placeholder" /&gt;

【讨论】：

考虑动态选择器的更改有多容易？我想有比这更有效的方法：jsfiddle.net/xqu9g7r2/1 或者可能没有？
@TemaniAfif 您可能不想在每个update 呼叫like this 上创建新规则。但总的来说，是的，每个选择器都需要一个规则。
是的，更新正是我想要的。谢谢

【解决方案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>

【讨论】：

【解决方案4】：

如果占位符颜色语义依赖于某个状态，可以间接设置

::placeholder { color: green; }
.warn::placeholder { color: red; }

<input id="test" placeholder="hello">
<button onclick="test.classList.toggle('warn')">Warning!</button>

在许多情况下，这根本不需要 javascript：

::placeholder { color: green; }
.color::after { content: 'green'; }

:checked + .color + ::placeholder { color: red; }
:checked + .color::after { content: 'red'; }

<input type="checkbox" id="color01">
<label class="color" for="color01">Color: </label>
<input placeholder="hello">

【讨论】：