javascript - 试图获取元素的占位符属性的样式

Question

我在使用占位符属性的公司网站上工作

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

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

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

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

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

我得到了错误的颜色结果:

红绿蓝 (0, 0, 0)

应该是:

RGB (255, 0, 0)

这是一个带有示例的 fiddle :https://jsfiddle.net/darnold24/6q1pr5cf/

如果我能得到任何帮助，我将不胜感激 :) 我也可以访问 jQuery，但我的理解是它只能检索元素的属性，而不能检索属性。

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" />