如何找出占位符的颜色？ [关闭]

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");

更新：

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