javascript getComputedStyle，但不是继承的(在 chrome 中)

Question

我只想获取页面上元素的计算样式，没有所有继承的样式

var allElements = document.querySelectorAll( '*' );
for (var i=0;i<allElements.length;i++){

    var element = allElements[i];

    var css = getComputedStyle(element);

}

这显然得到了所有样式的巨大列表。

我只需要在“显示继承”复选框被禁用时显示在 Chrome 检查器中的“计算样式”。

这是什么 JS？

编辑:

我基本上是想保存我在 Chrome 检查器中修改的所有 css。我在页面上布置东西，我正在玩字体和元素放置(拖动 jquery draggables)。我想保存所有内容的位置和 CSS。也许我走得太复杂了，有一种简单的方法可以在 Chrome 检查器中保存所有修改后的样式？

Answer 1

尝试获取元素及其父元素的计算样式，然后删除相同的属性:

var elems = document.getElementsByTagName('*');
var data = '';
for(var n=0;n<elems.length;n++){
    if(elems[n].parentNode.tagName){
    data+=elems[n].tagName + ': ' + elems[n].className+'\n';
        var style = [];
    var prStyle = [];
    var result = [];
    var css = window.getComputedStyle(elems[n], null);
    var prCss = window.getComputedStyle(elems[n].parentNode, null);
    for(var i=0;i<css.length;i++){
        if(css.getPropertyValue(css[i])){
            style[i] = css[i]+':'+css.getPropertyValue(css[i]);
        }
    }
    for(var i=0;i<prCss.length;i++){
        if(prCss.getPropertyValue(prCss[i])){
            prStyle[i] = prCss[i]+':'+prCss.getPropertyValue(prCss[i]);
        }
    }
    for(var i=0;i<style.length;i++){
        if(style[i]!=prStyle[i]){
            result.push(style[i]);
        }
    }
    for(var i=0;i<result.length;i++) data+=i+':'+result[i]+'\n';
}
data+='-----------------------\n';
}
return data;