试图获取元素的占位符属性的样式答案

【问题标题】：Trying to get style of placeholder attribute of element试图获取元素的占位符属性的样式
【发布时间】：2015-04-20 00:02:52
【问题描述】：

我正在使用占位符属性的公司网站

我只需要检索此属性的颜色样式，而不是从输入元素本身。

正在使用 --webkit-input-placeholder 设置样式：

::-webkit-input-placeholder {
        color: red;
    }

不幸的是，当我尝试使用 javascript 检索值时：

var color = window.getComputedStyle(document.querySelector('[class=abc]'),
'::-webkit-input-placeholder').getPropertyValue('color');

我得到错误的颜色结果：

rgb (0, 0, 0)

应该是：

rgb (255, 0, 0)

这里有一个例子：https://jsfiddle.net/darnold24/6q1pr5cf/

非常感谢我能得到的任何帮助:) 我也可以使用 jQuery，但我的理解是它只能检索元素的属性，而不是属性。

【问题讨论】：

笔记属性没有样式。您可能的意思是要检索伪元素的颜色。
据我所知，这在 JS 中是不可能的，因为伪元素不是 DOM 的一部分。
是的，我也找不到访问它的方法，而且似乎真的不可能。另请参阅与您的问题类似的SO question。

标签： javascript html css

【解决方案1】：

令人惊讶的是，您无法访问在您自己的 CSS 中定义的伪元素样式。

幸运的是，你可以通过迭代document.styleSheets得到它：

var st= document.styleSheets;
for(var i = 0 ; i < st.length ; i++) {
  var rules= st[i].cssRules;
  for(var j = 0 ; j < rules.length ; j++) {
    var css= rules[j].cssText;
    if(rules[j].selectorText.indexOf('::-webkit-input-placeholder') > -1) {
      console.log(rules[j].style.color);  //red
    }
  }
}

::-webkit-input-placeholder {
  color: red;
}

&lt;input id="myPlaceHolder" class="abc" type="text" placeholder="Sample Placeholder" /&gt;

【讨论】：