提问人：adrianhb 提问时间：11/13/2023 最后编辑：adrianhb 更新时间：11/19/2023 访问量：61
Javascript 设置样式的颜色，适用于 Firefox，不适用于 Chrome、Safari 等 [已关闭]
Javascript setting style's color, works in Firefox, not in Chrome, Safari etc [closed]
问：
下面是一个最小的 HTML 页面，如果缺少值，则将占位符文本变为红色
<html><head></head>
<body>
<input type="text", class="email", name="email", placeholder="initial placeholder text", size=48><br />
<button onClick="Validate()">
Validate
</button>
<script>
function Validate() {
var email = document.getElementsByClassName("email")[0];
if (email.value.trim() == '') {
email.placeholder = "Updated placeholder text";
email.style.color = "red"; // for Firefox
}
}
</script>
</body></html>
如果该字段留空，则在单击按钮时会更新占位符文本。在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);
设置背景颜色适用于所有浏览器！有什么建议吗？
答：
1赞
Jerem
11/13/2023
#1
更改占位符的颜色，您应该在 CSS 中使用选择器。令人惊讶的是，它实际上适用于 FF。::placeholder
无论如何，为了解决您的问题，我会建议使用特定的类来实现这一点。
在你的CSS中：
input.invalid-value::placeholder{
color: red;
}
然后在你的 JS 中：
if (email.value.trim() == '' || !ValidateEmail(email.value)) {
email.classList.add('invalid-value');
}
评论
0赞
adrianhb
11/13/2023
谢谢@Jerem！在 Chromium 上工作。但是在Firefox上什么也没做！使用此 AND 设置似乎涵盖了两个（所有？）浏览器。email.style.color = "red";
0赞
adrianhb
11/14/2023
再次感谢@Jerem。是的，在 CSS 中使用 opacity： 1，Firefox 也可以在没有添加 .并且仍然适用于 Chromium。您的链接暗示 Edge 版本 12-18 可能不满意，所以我也必须对此进行测试。email.style.color = "red";
0赞
adrianhb
11/14/2023
Edge 版本 12-18 已经过时，可以忽略不计。当前版本是 119！
评论