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

Posted 2023-02-22

【中文标题】如何使用 Javascript 更新占位符颜色？

【英文标题】：How to update placeholder color using Javascript?

【发布时间】：2019-07-11 23:05:58

【问题描述】：

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

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

::placeholder 
  color: red;

<input placeholder="placeholder" />

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

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

【参考方案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

【讨论】：

@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);
);

<input placeholder="placeholder" />

【讨论】：

考虑动态选择器的更改有多容易？我想有比这更有效的方法：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">