Javascript 设置样式的颜色，适用于 Firefox，不适用于 Chrome、Safari 等 [关闭]

Question

更新。我被要求提供调试细节/最小可重现示例。我已经尝试过，但无法运行一个小测试页面。 然而。从下面的文字中可以清楚地看出问题，用户@Jerem理解了它并提供了完美的解决方案。我已经接受这个作为解决方案。这个问题可以公开，以便其他人可以从@Jerem 的解决方案中受益吗？

如果值丢失或无效，我将使用以下代码将占位符文本变为红色

      if (email.value.trim() == '' || !ValidateEmail(email.value)) {
         email.placeholder = "Please enter Email";
         email.style.color = "red";
      }
 

电子邮件保存元素和占位符文本设置工作。在 Firefox 中，字体颜色变为红色，而在许多其他浏览器中则没有任何反应。 我尝试过使用所有这些

email.style = "color: red"; // invalid but works in Firefox
email.setAttribute('style', 'color:red;');
email.style.setProperty('color', 'red');

并且所有工作都在 FF 中进行，而不是在其他地方进行。

console.log(email.style.color);

显示该值已设置。

我猜你不能在 Safari 等中更改占位符文本的样式，只能在 Firefox 中更改。 但是设置 background 颜色适用于所有浏览器！有什么建议吗？

Answer 1

更改占位符的颜色，您应该使用 CSS 中的

::placeholder

选择器。令人惊讶的是它实际上可以在 FF 上运行。

无论如何，为了解决你的问题，我建议使用特定的类来实现这一点。

在你的CSS中：

input.invalid-value::placeholder{
    color: red;
}

然后在你的JS中：

if (email.value.trim() == '' || !ValidateEmail(email.value)) {
    email.classList.add('invalid-value');
}

希望有帮助！