JavaScript retrieves the list of styles currently applied to the element.

Question

A list of display styles only, not custom styles that don't apply

I tried many things to get the styles applied to the element, but came up with an empty one.

Please do not quote getComputedStyleas a solution if you cannot solve the problem of returning spam.

The main problem is that it window.getComputedStyle(document.querySelector('ANY ELEMENT')).fillwill return "rgb(0, 0, 0)", which is not the right style in almost all cases and does not have a visible recognition method if it is really applied or not.

The above example is not the only problematic case; There are many rules returned getComputedStylethat are incorrect and will radically change the appearance of the page if they apply.

Static parsing is not an option, as there are cases where .css files are on another server without cross-origin headers; which also hides styles commonly found in document.styleSheets.

Is there a way to get a list of applicable styles and nothing more?

As requested, this code will demonstrate the problem (in Chrome):

var all = document.getElementsByTagName('*');
for(var i in all)
    if (all[i].style) all[i].style.cssText = window.getComputedStyle(all[i]).cssText;

EDIT: my answer has code that works in all browsers. I save above to keep the stream of comments.

Answer 1

():

, getRenderedStyles:

getRenderedStyles .

function getRenderedStyles(element) {
    var tmpele, tmpstyle, elestyle, varstyle, elecolor, eletag;
    var styles   = {};
    var defstyle = {};
    elestyle   = window.getComputedStyle(element);
    elecolor   = elestyle.color; 
    eletag     = element.tagName;
    var frag = document.createDocumentFragment();
    frag.appendChild(document.documentElement);
    tmpele   = document.appendChild(document.createElement(eletag));
    tmpstyle = window.getComputedStyle(tmpele);
    styles['color']     = elecolor===tmpstyle.color?undefined:elecolor;
    tmpele.style.color  = elecolor; // workaround for color propagation on other styles 
    for (var i in tmpstyle)
        defstyle[i] = tmpstyle[i];
    tmpele.remove();
    document.appendChild(frag);
    varstyle = element.style;
    for (var i in varstyle) {
        if ((((typeof varstyle[i])==="string"))&&(i!=="cssText")) {
            if ((defstyle[i]!==elestyle[i]))
                styles[i] = elestyle[i];
        }
    }
    return styles;
}

, , -, , . .

, , / , :

function DOMDepth(element) {
    var cur  = element;
    var deep = 0;
    while(cur.parentNode)
        deep++, cur = cur.parentNode;
    return deep;
}

function getElementsByDepth() {
    var all = document.getElementsByTagName('*');
    var depth_map = {};
    var deepest   = 0;
    for(var i in all) {
        var depth = DOMDepth(all[i]);
        deepest   = depth>deepest?depth:deepest;
        depth_map[depth] = depth_map[depth] || [];
        depth_map[depth].push(all[i]);
    }
    depth_map['deepest'] = deepest;
    return depth_map;
}

function inlineComputedStyles() {
    var depth_map = getElementsByDepth();
    for (var i = depth_map.deepest; i>0; i--) {
        var elements = depth_map[i];
        for (var j in elements) {
            var styles = getRenderedStyles(elements[j]);
            for (var k in styles) {
                elements[j].style[k] = styles[k];
            }
        }
    }
}

, . , , .

, .

Answer 2

, . - getComputedStyle . , getComputedStyle . .

var all = document.getElementsByTagName('*');
tmpArr = []
for(var i in all) {
    if (all[i].style) {
        tmpArr[i] = window.getComputedStyle(all[i]).cssText;
    }
}
for(var i in all) {
    if (all[i].style) {
        all[i].style.cssText = tmpArr[i]; ;
    }
}
console.log("finish");

tmpArr[i] = window.getComputedStyle(all[i]).cssText; tmpArr[i] = window.getComputedStyle(all[i]).cssText + "-webkit-text-fill-color:#691099!important";, ,

, , , , , , .