Grow your CSS skills. Land your dream job.

Last updated on:

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

Code by Nathan Smith.

Comments

  1. 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. 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.

  3. 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. 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. 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.

    document.getElementById(‘idstring’).style.cssText=
    ‘font-size:1em;color:blue;visibility:visible';

    Here is the source above code

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".