使用 Javascript 获取 ::占位符颜色答案

【问题标题】：Get ::placeholder color using Javascript使用 Javascript 获取 ::占位符颜色
【发布时间】：2016-05-24 09:58:21
【问题描述】：

是否可以获得input 占位符文本的当前颜色值？通常我会使用getComputedStyle 来获取当前元素样式值，但它不会返回占位符值。

除了解析css文本和使用正则表达式获取值之外，还有什么解决方法吗？

谢谢。

【问题讨论】：

【解决方案1】：

getComputedStyle的第二个参数是pseudoElt选择器

所以要获取输入元素的占位符颜色：

var styles = window.getComputedStyle(inputEl, ':placeholder');
console.log(styles.getPropertyValue('color'));

【讨论】：

参考，MDN
传奇——这正是我所需要的！
这正是我所需要的，但不幸的是，这不再受支持。检查MDN 页面上的“注意”标注。 “...最新的 W3 标准仅明确支持 ::before 和 ::after，而 CSS WG 草案并未限制此值。浏览器兼容性可能会有所不同。”
在 Firerfox 中不起作用

【解决方案2】：

这是

window.getComputedStyle(inputEl, '::placeholder').getPropertyValue("color");
// note the DOUBLE colon here ----^^

适用于 Chrome 和 Firefox

【讨论】：

【解决方案3】：

通常占位符我们必须使用类名，然后更改占位符颜色

input.text-filed::-webkit-input-placeholder {
   color: red;
}

所以你知道有颜色的类

【讨论】：

即便如此，如何从元素本身获取当前颜色（在本例中为红色）？
您好，您可以指定特定输入字段的占位符和该类的占位符颜色，因此您可以根据条件检查颜色，请参阅我的 plunker plnkr.co/edit/X0CYpUx3Lcijd0wkirBL?p=preview
好的，我理解其中的困惑 - 我的目标是分析不受我控制的网站（为开发人员开发 Chrome 扩展程序），所以我事先不知道颜色可能是什么。跨度>