This function also preserves hidden content.
function remove_style(all) { var i = all.length; var j, is_hidden; // Presentational attributes. var attr = [ 'align', 'background', 'bgcolor', 'border', 'cellpadding', 'cellspacing', 'color', 'face', 'height', 'hspace', 'marginheight', 'marginwidth', 'noshade', 'nowrap', 'valign', 'vspace', 'width', 'vlink', 'alink', 'text', 'link', 'frame', 'frameborder', 'clear', 'scrolling', 'style' ]; var attr_len = attr.length; while (i--) { is_hidden = (all[i].style.display === 'none'); j = attr_len; while (j--) { all[i].removeAttribute(attr[j]); } // Re-hide display:none elements, // so they can be toggled via JS. if (is_hidden) { all[i].style.display = 'none'; is_hidden = false; } } }Usage
Call the function like this:
var all = document.getElementsByTagName('*'); remove_style(all);Note: Selecting all elements in the page via a wildcard query could be slow, depending on how many elements are in the page. You could use a smaller set of elements to be more performant:
var set = document.getElementById('foo').getElementsByTagName('bar'); remove_style(set);
Excellent snippet, thanks for sharing it. I can see this coming in very handy when trying to update a old site where the client doesn’t want to re-code it.
Thanks for the snippet!
It would be cool if there was a bookmarklet that did something like this. It might be useful to quickly check how much work you’ll need to do when converting a page to HTML5 standards where a lot of these attributes are obsolete.
I’ve made the bookmarklet that does what I described above!
If you’re interested check it out at attrebuke.
Just found a little issue with this. Apparently in IE, removeAttribute will work on
bgColor(with title-caseC) but NOTbgcolor. So probably best to have both.As a designer who spends much of my time dabbling in / fixing other people’s code, this is a lifesaver! Can’t wait to try it out. Seems like it would work best for projects with targeted elements that need designed.
same with jQuery :
remove all styles
$(‘#foo bar’).removeAttr(‘style’);
remove one
$(‘#foo bar’).css(‘float’,”);
If you are willing to replace any other inline styles for that element you can use the style.cssText property.
document.getElementById(‘idstring’).style.cssText=
‘font-size:1em;color:blue;visibility:visible’;
Here is the source above code
OK…. sooo, what’s the difference between using this and element.removeAttribute(‘style’)?
styleis only one possible presentational attributeI was super pumped when I found this, thinking it would help me remove ALL of the inline styles from an HTML email, however it does not appear to work. I am beginning to troubleshoot why, but here is what I suspect:
My HTML email is not an HTML5 doc
that’s all I got right now.
I tried the bookmarklet without success too.
Should this work for HTML email? I accidentally inlined all of my CSS, and a few hours of tweaks, and saved over top of the non-inlined version. The pain. I’ll spend a bit of time trying to get this to work, but at some point it may be quicker to redo the HTML email – from a time-saving perspective.
What do you think?
Incase someone else stumbles upon this post, here is how to remove inline styles from your HTML email:
Add the following right before the closing body tag:
Save the file and open it in your browser. Right-click and choose Inspect. Then, right-click on the HTML element, select “Edit as html” and now you can select all to copy the HTML with the inline styles removed.
If you are using conditional comments in the HTML (which you should be), you will have to do a bit of manual find and replace later to remove the inline styles from anything inside conditional comments.
As a follow up to my (dusty) old comment above, I blogged in a bit more detail, a solution to this problem:
http://wepiphany.com/remove-inline-styles-from-html-email/
Does this ONLY work with using getElementByTagName?
I tried this:
var targetElement = document.getElementById(“div2”);
and it didnt work.
Can you use an ID instead? (would seem easier to target the element specifically, especially if there is only 1 element)