Why doesn't removeAttribute() remove anything in the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="myDiv">
Element with style.
</div>
<br />
<br />
<button onclick="DelStyle()">
Remove the style attribute from the element
</button>
<script type="text/javascript">
function DelStyle() {
var div = document.getElementById("myDiv");
console.log(div)
div.style.border = 'solid #3B3B3D 1px';
console.log(div)
div.removeAttribute("style");
console.log(div)
}
</script>
</body>
</html>
Why doesn't removeAttribute() remove anything in the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="myDiv">
Element with style.
</div>
<br />
<br />
<button onclick="DelStyle()">
Remove the style attribute from the element
</button>
<script type="text/javascript">
function DelStyle() {
var div = document.getElementById("myDiv");
console.log(div)
div.style.border = 'solid #3B3B3D 1px';
console.log(div)
div.removeAttribute("style");
console.log(div)
}
</script>
</body>
</html>
7 Answers
Reset to default 4Just call getAttribute("style") before removeAttribute("style").
e.g.
function DelStyle() {
var div = document.getElementById("myDiv");
console.log(div)
div.style.border = 'solid #3B3B3D 1px';
console.log(div)
div.getAttribute("style");
div.removeAttribute("style");
console.log(div)
}
See http://jsfiddle.net/qTv22/
This looks very much like a Chrome JS optimization bug. Although the HTML5 spec says
The style IDL attribute must return a CSSStyleDeclaration whose value represents the declarations specified in the attribute, if present. Mutating the CSSStyleDeclaration object must create a style attribute on the element (if there isn't one already) and then change its value to be a value representing the serialized form of the CSSStyleDeclaration object. The same object must be returned each time.
Chrome is trying to defer the creating of the style attribute for as long as it can, so that a series of mutations of the IDL attribute can be rolled up into a single creation/change of the content attribute. The code is simply omitting to perform the create/change action before the removeAttribute call, but does so correctly for getAttribute. Once the content attribute has been created, removeAttribute will successfully destroy it.
The problem is you are making all these changes at once before the DOM updates. Instead consider actually setting the style attribute to nothing see here
div.setAttribute("style","");
As advised on MDN, one should use removeAttribute over setting to null or empty string.
It may not work properly though and the solution is to use requestAnimationFrame or setInterval if the less standard browser you want to target doesn't support RAF.
It looks like it needs a more time, example
function DelStyle() {
var div = document.getElementById("myDiv");
console.log(div)
div.style.border = 'solid #3B3B3D 1px';
console.log(div)
setTimeout((function(div) {
return function() {
div.removeAttribute("style");
console.log(div);
}
})(div), 500);
}
I'm removingAttribute after a half second.
Test this
div.attributes.removeNamedItem("style");
I was having trouble with removeProperty and removeAttribute. I solved it by writing the original instance of that property/attribute inline in my html instead of my css.
I tried calling both the setAttribute() and getAttribute() methods before calling removeAttribute().
It didn't work for me: Neither did setting the style attribute to nothing.
What did work was to use the removeAttributeNode() method.
As described here: http://www.w3schools.com/jsref/met_element_removeattributenode.asp the result will be the same; e.g.
function DelStyle() { var div = document.getElementById("myDiv"); console.log(div) div.style.border = 'solid #3B3B3D 1px'; console.log(div) div.removeAttributeNode(div.getAttribute("style")); console.log(div) }
div.style.border = 'solid #3B3B3D 1px';you are not setting the element's style attribute, you are only setting the object's style property. – Arnaud Le Blanc Commented Aug 23, 2011 at 17:55setAttributeand thenremoveAttributewill work: jsfiddle.net/interdream/tFxMm/1 – James Allardice Commented Aug 23, 2011 at 17:59