Question

我可以使用document.stylesheets获取元素的所有css属性，但其中一些属性不活动，因为这些属性被覆盖。在firebug中（chrome开发者工具也有这个功能），如果有一个覆盖的css属性，你会看到类似的东西： enter image description here

我能想到的唯一方法是比较元素的活动css属性（在jQuery $(element).css(property)中）和document.stylesheets中定义的css属性，但这不是一种可行的方法。有什么建议吗？

Answer 1

在webkit中，您可以使用getMatchedCSSRules来实现您的目标。它返回一个CSS规则集，按照浏览器和is what the webkit inspector used前一段时间应用的继承顺序。对于像Firefox这样的基于Gecko的浏览器，似乎有一个可用的填充物here，尽管我没有测试它。

基本的，有效的解决方案

The following code is also available as a fiddle

由于getMatchedCSSRules only works with inline stylesheets，您首先必须内联链接的样式表：

function inlineStyles() {
    var stylesheets = document.getElementsByTagName('link'),
        head = document.getElementsByTagName('head')[0];

    for (var i = 0; i < stylesheets.length; i++) {
        if (stylesheets[i].getAttribute('rel') == 'stylesheet') {
            (function (stylesheet) {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", stylesheet.getAttribute('href'), true);
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        var inlineStyle = document.createElement('style');
                        inlineStyle.setAttribute('type', 'text/css');
                        inlineStyle.innerText = xmlhttp.responseText;
                        head.replaceChild(inlineStyle, stylesheet);
                    }
                };
                xmlhttp.send();
            })(stylesheets[i]);
        } else {
            continue;
        }
    };
}

然后，大块：这是第一枪，随意改进。它可以处理inherit个规则和最多一个!important定义，但就是这样。对于非常复杂的设置，必须进行改进：

function getStyle(s, id) {
    var element = typeof id === 'string' ? document.getElementById(id) : id,
        css = window.getMatchedCSSRules(element),
        style = window.getComputedStyle(element),
        value = style[s],
        styles = [],
        rules = [],
        inherited, currentRule;

    // if there's a computed style, start calculation
    if (value) {

        // add matched rules if there are any
        if (css) {
            for (var i = 0; i < css.length; i++) {
                styles.push(css[i]);
            }
        }

        // add the element style attribute as a matched rule
        styles.push({
            style: element.style,
            cssText: 'element.style {' + element.getAttribute('style') + ' }'
        });

        for (var i = styles.length - 1; i >= 0; i--) {
            var def = styles[i],
                rule = {
                    index: rules.length,
                    style: s,
                    value: styles[i].style[s],
                    cssText: def.cssText
                };

            if (rule.value == 'inherit' && !currentRule) {
                if (inherited = getInherited(element, s, value)) {
                    rule.inheritedFrom = inherited;
                    currentRule = rule;
                    inherited = undefined;
                } else {
                    rules.push(rule);
                }
            } else if (rule.value == 'inherit' && currentRule && isImportant(s, value, def.cssText)) {
                if (inherited = getInherited(element, s, def)) {
                    rule.inheritedFrom = inherited;
                    rules.splice(currentRule.index, 0, currentRule);
                    currentRule = rule;
                    inherited = undefined;
                } else {
                    rules.push(rule);
                }
            } else if (rule.value == value && !currentRule) {
                currentRule = rule;
            } else if (rule.value == value && currentRule && isImportant(s, value, def.cssText)) {
                rules.splice(currentRule.index, 0, currentRule);
                currentRule = rule;
            } else if (rule.value.length) {
                rules.push(rule)
            }
        }

        return {
            current: currentRule,
            overwritten: rules
        };

    } else {
        return false;
    }
}

如果正在进行继承，我们走向DOM节点以找到使用此帮助函数定义CSS规则的元素并获取其样式：

function getInherited(element, s, value) {
    while (element.parentNode && window.getComputedStyle(element.parentNode)[s] == value) {
        element = element.parentNode;
    }

    if (element) {
        return getStyle(s, element).current;
    } else {
        return null;
    }
}

我们确定是否使用此辅助函数将CSS规则标记为重要：

function isImportant(s, style, text) {
    return new RegExp(s.replace(/([A-Z])/g, '-$1').toLowerCase() + ':\\s+' + style + '\\s+!important').test(text)
}

Have a look at the fiddle to see it working

Answer 2

这个代码段可能对您有用，它过去帮助过我，将其应用到您的一个CSS文件中，您将能够通过查找特定位置来查看其他类/ ID规则覆盖了哪些对象元素CSS声明的位置，以及跟踪其父级。我的猜测是你有继承问题。

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

或者你可以添加一个：hover属性，它会让它更容易导航，但代码片段的基本原理是向你展示元素的嵌套，并可以帮助你确定问题的位置你的CSS是

Answer 3

您必须解析链接到页面的CSS文件才能确定正在使用的样式。您还必须确定可以使用哪些属性来定位CSS中的元素。以下是您必须遵循的流程：

元素可以是以下目标：标记，ID，类，伪类和继承

然后你会有一个给定的元素，例如：

<a href="#" id="link" class="button">Woop</a>

默认情况下，该元素有几个与之关联的选择器。所有元素都可以继承父CSS，因此您必须创建父元素的层次结构。以后的样式将优先。然后，您必须考虑标记a以及也共享此选择器的任何父级，例如body a。同样，您必须创建继承属性的层次结构。您将为类，属性和伪类重复此过程。编译元素的树列表后，可以解析CSS文档以获取相应的样式。

这绝对是一项艰巨的任务，重新发明轮子是没有意义的。我建议看看已经完成此项工作的开源项目。 WebKit是一个已经构建了这个系统的开源项目。考虑使用他们的实现作为起点并从那里进行更改。

如何检测覆盖的css属性？

3 个答案:

基本的，有效的解决方案