如何找出占位符的颜色？

Question

我知道如何设置占位符的颜色，但如果我需要在某些页面上找出占位符的颜色怎么办？我找不到Chrome Devtools的这个属性。 ColorZilla也没有帮助。

Answer 1

您似乎无法在DevTools中访问伪placeholder属性的CSS。您只能在JavaScript中使用getAttribute('placeholder')获取文本值。

但是，可以使用JavaScript查看样式属性，而不是在CSS文件中手动查找它们。这不是理想的，但我创建了一个通用函数，允许您指定选择器（或选择器的一部分），以及您要查找的属性，它将遍历所有样式表并将表记录到控制台

function getSelectorStyle(selector, attribute) {

    var rules = [];

    function CSSRule(sheet, selector, value) {
        this.sheet = sheet;
        this.selector = selector;
        this.value = value;
    }

    var styleSheets = document.styleSheets;
    for (var i = 0; i < styleSheets.length; i++) {
        var currentSheet = document.styleSheets[i];
        if (currentSheet != null) {
            var ruleList = currentSheet.cssRules;
            if (ruleList != null) {
                for (var j = 0; j < ruleList.length; j++) {
                    var currentRule = ruleList[j];
                    if (currentRule.selectorText != null) {
                        if (currentRule.selectorText.indexOf(selector) != -1) {
                            var sheetLocation = currentSheet.href ? currentSheet.href : "inline-css";
                            var item = new CSSRule(sheetLocation, currentRule.selectorText, currentRule.style[attribute]);
                            rules.push(item);
                        }
                    }
                }
            }
        }
    }

    console.table(rules)
}

getSelectorStyle("placeholder", "color");

更新

就您的颜色与亚马逊网站不匹配的问题而言，根据以下评论，似乎未应用选择器.form-control::-webkit-input-placeholder。 input字段未包含在form-control中。我们会应用默认的占位符颜色，即#A9A9A9（至少在Chrome中），这就是您所看到的。