Reset inline styles at dom level

by Marventus

HTML

<div class="wrap">
    <h1>Pure JS:</h1>
    <p id="main1" class="main">Some text</p>
    <br/>
    <button id="style1">Add styles</button>
    <button id="reset1">Reset styles</button>
</div>

<div class="wrap">
    <h1>jQuery:</h1>
    <p id="main2" class="main">Some text</p>
    <br/>
    <button id="style2">Add styles</button>
    <button id="reset2">Reset styles</button>
</div>
<hr/>
<br/>
<h1 class="usage">Usage:</h1>
<p><em>Each "Add styles" button will style the text right above it, whereas each "Reset styles" button will remove all inline styles in the dom.</em></p>

CSS

html {
    font: 0.85em sans-serif;
}
button, div, h1, hr, p {
    margin-bottom: 10px;
}
button {
    font-size: 0.9em;
    padding:5px 15px;
}
em {
    font-style: italic;
}
h1 {
    color: #666;
    font-size: 1.3em;
    font-weight: bold;
}
.main {
    background-color: #2cae85;
    color: #e3e3e3;
    display:inline-block;
    padding:10px 20px;
}

JavaScript

/* Pure JS */
var main1 = document.getElementById("main1"),
    styles1 = "border-radius:5px; text-shadow:0 0 5px #000";
document.getElementById("style1").addEventListener("click", function() {
    main1.style.cssText += " " + styles1;
});
document.getElementById("reset1").addEventListener("click", function() {
    var elems = document.querySelectorAll("*[style]");
    for(i=0; i<elems.length;i++) {
        elems[i].removeAttribute("style");
    }
});
    
/* jQuery */
var main2 = $("#main2"),
    styles2 = {"border-radius": "5px", "text-shadow": "0 0 5px #000"};
$("#style2").on("click", function() {
    main2.css(styles2);
});
$("#reset2").on("click", function() {
    $("*[style]").removeAttr("style");
});