Code Snippet
Remove Inline Styles
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.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.