Remove Inline Styles

Last updated on:

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

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 in triple backtick fences like this:

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed