3

継承されたすべてのスタイルではなく、ページ上の要素の計算されたスタイルのみを取得したい

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のドラッグ可能なものをドラッグしています）。すべての位置と CSS を保存したい。多分私は複雑になりすぎたので、変更したすべてのスタイルを Chrome インスペクタに保存する簡単な方法はありますか?

4

1 に答える 1

3

要素とその親要素の計算されたスタイルを取得してから、同一のプロパティを削除してみてください:

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;
于 2014-06-18T11:32:38.013 に答える