className change not working : possible Solution

[Supernaut]

I was just battling a small dHTML quirk where I was attempting to set
the className attribute of option elements, but it didn't seem to be
updating. I did some testing with other elements and came to find the
problem was not in my code at all, but rather in my logic...

I had a dehighlightAll(selectBox) function in my code library and
decided to use this to reset all the options to white backgrounds.
This worked fine with my previous method where I explicitly set the
style.background attribute of the options. But when I wanted to use
className instead, everything mysteriously stopped working. I thought
there must be something wrong with className and started
investigating....

I eventually came to the realization that if you explicitly set a style
element, it won't be overridden by the className. This was an
oversight on my part and thought that it might be useful to post about
it, because it could be easy to miss and I haven't seen any posts about
it.

It really comes down to the CSS order of precedence ... that is the
style field modifies the inline style of the object, while the
className references a class ... and as CSS precedence dictates, inline
styles override all others. So this is a word to the wise to be
careful if you're ever mixing className and style elements

 

[Thomas 'PointedEars' Lahn]

I eventually came to the realization that if you explicitly set a style
element,

You cannot "set" a style element. See below.

[...]
It really comes down to the CSS order of precedence ... that is the
style field

You are speaking of a proprietary property, or a standardized attribute;
not a field.

modifies the inline style of the object, while the className references
a class ... and as CSS precedence dictates, inline styles override all
others.

"Precedence" is a wrong/insufficient term here.

<URL:http://www.w3.org/TR/CSS2/cascade.html#specificity>
<URL:http://www.w3.org/TR/CSS21/cascade.html#specificity>

Since CSS2 and CSS 2.1 differ here, the latter is to be
considered the erratum for the former, even if it is a WD.

So this is a word to the wise to be careful if you're ever mixing
className and style elements

You mean the `style' attribute (style="...") or `style' property
(...style.foo = bar), not the style element (<style ...>...</style>).


PointedEars