Unsetting JavaScript Set CSS

Unsetting JavaScript Set CSS 9.5.2011

Setting properties of elements in the dom using JavaScript is one of the most basic practices in web development. That being said, developers often misunderstand what happens when you get or set a property this way. For example, people often stumble over unsetting a property using JavaScript. Take the following situation:

A background color is set on a block of text. You change that color when mousing over the text by switching the classname. When mousing out, you return to the original state by swapping classnames back. Simple.
Now, let's say you want to have the color fade back to the original. You've got a library that allows you to do incremental color transformations over time (or you can do it manually with a little math and and an interval).
Seems easy, but highlighting doesn't work the second time around, instead it stays on the last color set by JavaScript. You can fix it by hard coding the highlight color in the rollover but that starts to get clunky and, if you have more than two states, it gets hard to manage what color you're on.

So, what's happening? It's simple really, when you set a property on a dom element, it's the same as inserting the text in the style attribute:

<div class="textBlock" style="background: #FFCC00;">asdf</div>

Inline style properties superscede properties from the inherited from a style rule, so your JavaScript to change classnames works, but the background property remains overridden. It would be ideal if you could just unset the one property, but there's no straightforward way to do that. Trying to set the backgroundColor to '' results in:

<div class="textBlock" style="background:;">asdf</div>

And the rendering is inconsistent across browsers (this varies from property to property, background positioning is particularly troubling). The brute-force method for removing JavaScript set properties is to remove all style text by calling:

myDomElement.style.cssText = '';

Resulting in:

<div class="textBlock">asdf</div>

That's great, in this case, but what if you had inline style in the original markup that you don't want to remove? Or, what if you only wanted to remove one property of many JavaScript set values? You might think that you could just do some string manipulation on the cssText value. For instance, if you wanted to remove the line-height property, you could just use the following:

myDomElement.style.cssText =
    myDomElement.style.cssText.replace(/line-height: [^;]+;/, '');

However, properties are often joined in the ouptput of cssText and you need to do more than find the single property. Let's use background-position as an example:

<div style="background:red">test</div>

Would have a cssText value of:

background: none repeat scroll 0% 0% red;

in Firefox and:

background-image: initial; background-attachment: initial; 
   background-origin: initial;
   background-clip: initial; background-color: red;
   background-position: initial initial; 
   background-repeat: initial initial;

in Chrome.

In the end you would need to craft a library to handle all known cases and you'll likely find browser idiosyncrasies that make it error prone and difficult to maintain. At the time of writing, I'm not aware of any such capability in common/well-maintained libraries such as YUI or Closure. I will update this article if I come across any such capability.

Unfortunately, my best suggestion at this time is to be aware of the issue, keep inline styles to a minimum and know that, for individual properties, you can craft a regex to unset if you have to.