在 webkit 中，你可以使用getMatchedCSSRules 来实现你想要的。它按照浏览器应用的继承顺序返回一个 CSS 规则集，它是前一段时间的is what the webkit inspector used。对于像 Firefox 这样的基于 Gecko 的浏览器，似乎有一个可用的 polyfill here 虽然我还没有测试过。
一个基本的、有效的解决方案
The following code is also available as a fiddle
因为getMatchedCSSRulesonly 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