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

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

试图获得元素的占位符属性的样式

1 个答案: