尝试获取元素占位符属性的样式

Question

我正在制作公司网站，该网站使用占位符属性。

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

它使用--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，但我的理解是它只能检索元素的属性，而不能检索属性。

- David Arnold

---

注意属性没有样式。你可能想要检索伪元素的颜色。 - Oriol

据我所知，使用JS无法实现这一点，因为伪元素不是DOM的一部分。 - Adrift

是的，我也找不到访问它的方法，似乎真的不可能。请参考这个与你的问题类似的SO问题。 - AWolf

Answer 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;
}

<input id="myPlaceHolder" class="abc" type="text" placeholder="Sample Placeholder" />

- Rick Hitchcock