Style behavior difference between WebKit and Gecko

Question

I was working on a web application when I noticed some peculiar behavior. I have an element with styles applied via the JavaScript style property. Afterwards, I tried to remove all of the styles applied on the element with removeAttribute("style"). This only works on Gecko. WebKit does nothing.

I have discovered a workaround (using setAttribute("style", "") before removing the attribute) but I don't understand why the setAttribute would be needed on WebKit but not Gecko. Why?

I have an example of the behavior here. Try commenting out the setAttribute line and see how the behavior differs between Gecko and WebKit.

Answer 1

Could it depend on how you set the attribute?

var test=document.getElementById("test");
//test.style.background="green";
test.setAttribute("style", "background: green");
test.removeAttribute("style");

I comment out the second line, because it is a different way of changing that particular attribute.

Now the fourth line works correctly in webkit (using google chrome dev channel), and when I comment it out, //test.removeAttribute("style"), the box remains green from the third line.