使用 javascript 更改输入占位符的样式答案

【问题标题】：change style of input placeholder with java script使用 javascript 更改输入占位符的样式
【发布时间】：2016-11-09 05:24:49
【问题描述】：

我尝试通过添加一个新类来更改占位符的颜色，从而覆盖颜色属性。但是，它似乎不起作用。以下代码旨在将占位符颜色从绿色更改为红色，但它从绿色更改为默认的黑色/灰色。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <input class="class" id="id" type="" name="" placeholder="placeholder text">
</body>
<style type="text/css">
  .class::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    green;
  }
  .class2::-moz-placeholder {
    color:  red !important;
   }
</style>
<script type="text/javascript">document.getElementById("id").className+="class2";</script>
</html>

错误在哪里或哪个替代方案有效？

【问题讨论】：

你需要用空格分隔css类，即.className += ' class2'。为什么不直接替换类呢？ class 中没有任何东西不在 class2 中
投票以错别字结束
确实忘记了，感谢您的快速回复
我把问题降到最低，在原来的问题中定义了更多的属性

标签： javascript css placeholder

【解决方案1】：

对于支持 ES5 的浏览器，一个很好的现代解决方案是使用来自选定 DOM 节点的 classList 方法。这样，在将片段渲染到 DOM 时，您就不会遇到 concat 问题。

document.getElementById("id").classList.add("class2")

【讨论】：

【解决方案2】：

document.getElementById("id").className += "class2";

将类名转换为"classclass2"。因为在你的 CSS 中没有对应的类 classclass2，所以这个元素被忽略了。在新类名前加一个空格：

document.getElementById("id").className += " class2";

或使用更现代的classList 方法：

document.getElementById("id").classList.add("class2");

【讨论】：