Last Updated: February 25, 2016
·
407
· williankeller

Remove inline styles and add in the site header

Want to display a clean code and without inline content?

Here's a fun way to remove the codes online and add all the site so header within the style tag, of course.


(function () {
    /*
     *
     * Variable definitions
     * 
     * @variables
     * a = Array (exit repeat loop)
     * c = Count (for new classes count)
     * e = Space (if there is already a class, add space)
     * h = Header (create a style based on the header "head")
     * n = New style (insert new style to the style base)
     * r = Random (creates a new class / id random)
     * s = Selectors (search all style selectors)
     * t = Inline text (inline text captures the style)
     *
     */

    var c, e, h, n, r, s, t;

    r = Math.random().toString(36).substring(14);

    s = document.querySelectorAll("*[style]");

    h = document.createElement('style');

    h.id = r;

    document.getElementsByTagName('head')[0].appendChild(h);

    c = 1;

    Array.prototype.forEach.call(s, function (a) {

        e = '';

        if (a.className !== '') {

            e = ' ';
        }

        a.className = a.className + e + r + '_' + c;

        t = a.style.cssText;

        n = document.getElementById(r);

        n.innerHTML = n.innerHTML + '.' + r + '_' + c + '{' + t + '}';

        a.style.cssText = '';

        c = c + 1;
    });

})();

Great! To view the operating, add this script in the header of your site and just let it work.