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. User Avatar
    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. User Avatar
    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.

    • User Avatar
      Permalink to comment#

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

      If you’re interested check it out at attrebuke.

  3. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

    same with jQuery :

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

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

  6. User Avatar
    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. User Avatar
    Permalink to comment#

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

    • User Avatar
      Chris Coyier
      Permalink to comment#

      style is only one possible presentational attribute

  8. User Avatar
    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?

    • User Avatar
      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. User Avatar

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

  10. User Avatar
    Permalink to comment#

    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)

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.