我在网上搜索，我没有找到任何东西。我正在尝试使用 javascript 更新文本框的占位符颜色，但我该怎么做？我有一个颜色选择器，颜色正在改变。
如果我的 CSS 中有这样的东西，我该如何更新它？
::placeholder {
color: red;
}<input placeholder="placeholder" />是否有 javascript 命令来编辑它？就像是
document.getElementById('text').style.placeholderColor = newColor;
使用 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等，您只需定义自定义属性，你可以很容易地在主要元素上更新和伪元素将继承它。
正如其他答案中所述，您不能更改内联伪元素样式。但是，您可以修改 CSS 规则<style>本身，并且您不需要浏览器支持 ing CSS 变量。访问样式表并获取现有规则或插入您自己的规则，然后像处理元素一样使用其样式声明.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);
}});<input placeholder="placeholder" />还有另一种方法，但它有点老套：使用 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>如果占位符颜色语义依赖于某种状态，则可以间接设置
::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">