Computed Style

getComputedStyle.js

(function () {

    const nav = document.querySelector(".kss-nav");
    const el = document.getElementById("codebase");

    function getRules(el) {
        var StyleSheetList = document.styleSheets[4],
            result = [];
        el.matches =
            el.matches ||
            el.webkitMatchesSelector ||
            el.mozMatchesSelector ||
            el.msMatchesSelector ||
            el.oMatchesSelector;

        const CSSRuleList = [...StyleSheetList.cssRules];
        for (const CSSStyleRule in CSSRuleList) {
            if (el.matches(CSSRuleList[CSSStyleRule].selectorText)) {
                result.push(CSSRuleList[CSSStyleRule]);
            }
            console.log(CSSStyleRule)
        }
        return result;
    }

    function toArray(obj, ignoreFreud) {
        var arr = [],
            i;
        for (i = 0; i < obj.length; i++) {
            if (!ignoreFreud || obj[i]) {
                arr[i] = obj[i];
            }
        }
        return arr;
    }

    function readStyles(els) {
        return [...els].reduce(function readStylesReducer(styles, el) {
            styles.push(getRules(el));
            styles = styles.concat(readStyles(toArray(el.children)));
            return styles;
        }, []);
    }

    function extractCSS(selector) {
        let elements = document.querySelectorAll(selector),
            stylesList = readStyles(elements),
            allTextArray = [],
            cssTextArray = [];
        for (const CSSRuleList in stylesList) {
            for (const CSSStyleRule in stylesList[CSSRuleList]) {
                const member = stylesList[CSSRuleList][CSSStyleRule];

                allTextArray.push(member.cssText);
                cssTextArray = [...new Set(allTextArray)];
            }
        }
        cssTextArray.length != 0 ?
            (el.textContent = cssbeautify(cssTextArray.join("\n"))) :
            (el.textContent =
                "Failed to generate CSS Classname or Style Sheet Rules for this block do not exist.");
        return
    }

    document.querySelectorAll(".btn-codebase").forEach(button => {
        button.addEventListener("change", function () {
            nav.classList.toggle("hidden");
            el.parentElement.classList.toggle("hidden");
            const prev = this.previousElementSibling;
            if (prev.classList.toString().length > 0) {
                let selector = "." + prev.classList.toString();
                extractCSS("" + selector + "");
            };
        });
    });
})();

getComputedStyleAlternative.js

function computeStyles(el) {
    var r;
    var d = window.getComputedStyle(el);
    for (var i = 0; i < d.length; i++) {
      r += d[i] + ': ' + d.getPropertyValue(d[i]) + '; ' + '\n';
    }
    return r;
}

computeStyles(document.body);