使用 java 脚本更改输入占位符的样式

Question

我尝试通过添加新的 class 来更改占位符的颜色，这样颜色属性就会被覆盖。但是，它似乎不起作用。以下代码旨在将占位符颜色从绿色更改为红色，但它已从绿色更改为默认值 black/gray。

<!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>

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

Answer 1

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

将 class 名称变为 "classclass2"。因为你的CSS中没有对应的classclassclass2，这个元素被忽略了。在新的 class 名称前添加一个 space：

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

或使用更现代的 classList 方法：

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

Answer 2

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

时，您就不会运行陷入连接问题

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

使用 java 脚本更改输入占位符的样式

change style of input placeholder with java script

javascript

css

placeholder