如何在 JavaScript 中使用 CSS 变量动态更新占位符颜色？

在 Javascript 中使用 CSS 变量更新占位符颜色

JavaScript 缺乏修改占位符颜色的直接方法。不过，可以利用 CSS 变量来实现此效果。

HTML 代码：

<input type="text" placeholder="Placeholder" />
<button onclick="update()">Change Placeholder Color</button>

CSS 代码：

::placeholder {
  color: var(--placeholder-color, red);
}

Javascript 代码：

function update() {
  const placeholderColor = document.querySelector('#color-picker').value;
  const input = document.querySelector('input[type=text]');

  input.style.setProperty("--placeholder-color", placeholderColor);
}

在此脚本中，update() 函数从颜色选择器元素中检索所选颜色并设置 CSS 变量的值 --文本输入元素中的占位符颜色。通过在 CSS 中引用此变量，单击按钮时会动态更新占位符颜色。

注意：

• 请务必包含颜色选择器HTML 中的元素，使用户能够选择新的占位符颜色。
• 使用此技术，您可以通过为相应的输入元素分配唯一的 CSS 类名称来定位特定的占位符。

以上是如何在 JavaScript 中使用 CSS 变量动态更新占位符颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！