Question

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

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

将班级名称改为"classclass2"。由于CSS中没有对应的类classclass2，因此忽略此元素。在新类名前添加一个空格：

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

或使用更现代的classList方法：

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

Answer 2

针对ES5就绪浏览器的一个很好的现代解决方案是使用所选DOMnode中的classList方法。这样，在将片段呈现给DOM时，您不会遇到连接问题。

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

使用java脚本

2 个答案: