JS | Style - removeAttribute() vs removeProperty()

by Zoltan Boros

HTML

<p id="element">FooBar</p>
<button onclick="doSomething()">Click here</button>
<pre id="out"></pre>

JavaScript

var e = document.getElementById("element");
var out = document.getElementById("out");
var i = 0;
function print(text)
{
    out.innerHTML += text + "\n";
}
function doSomething()
{
    if (i % 2 == 0) {
        e.style.color = "#ff0000";
        e.style.backgroundColor = "#000000";
    } else {
        if (e.style.removeAttribute) {
            print("Function style.removeAttribute() exists. Calling it...");
            e.style.removeAttribute("color");
            e.style.removeAttribute("background-color");
        }
        if (e.style.removeProperty) {
            print("Function style.removeProperty() exists. Calling it...");
            e.style.removeProperty("color");
            e.style.removeProperty("background-color");
        }
    }
    i++;
}