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 = [

  var attr_len = attr.length;

  while (i--) {
    is_hidden = (all[i].style.display === 'none');

    j = attr_len;

    while (j--) {

    // Re-hide display:none elements,
    // so they can be toggled via JS.
    if (is_hidden) {
      all[i].style.display = 'none';
      is_hidden = false;


Call the function like this:

var all = document.getElementsByTagName('*');

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');

Code by Nathan Smith.


  1. Matt Zimmermann
    Permalink to comment#

    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.

  2. Keith
    Permalink to comment#

    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.

    • Keith
      Permalink to comment#

      I’ve made the bookmarklet that does what I described above!

      If you’re interested check it out at attrebuke.

  3. Keith
    Permalink to comment#

    Just found a little issue with this. Apparently in IE, removeAttribute will work on bgColor (with title-case C) but NOT bgcolor. So probably best to have both.

  4. Mandy Barrington
    Permalink to comment#

    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.

  5. zetoun
    Permalink to comment#

    same with jQuery :

    remove all styles
    $(‘#foo bar’).removeAttr(‘style’);

    remove one
    $(‘#foo bar’).css(‘float’,”);

  6. spinne
    Permalink to comment#

    If you are willing to replace any other inline styles for that element you can use the style.cssText property.


    Here is the source above code

  7. Chris
    Permalink to comment#

    OK…. sooo, what’s the difference between using this and element.removeAttribute(‘style’)?

    • Chris Coyier
      Permalink to comment#

      style is only one possible presentational attribute

  8. Jono
    Permalink to comment#

    I 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?

    • Jono
      Permalink to comment#

      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:

      <script src="" type="text/javascript"></script>
          $('*').each(function ()

      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.

  9. Jono

    As a follow up to my (dusty) old comment above, I blogged in a bit more detail, a solution to this problem:

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.