I was struggling with a problem related to the different way different browsers normalize (or don't normalize) color definitons. I just wanted a background table cell to toggle color on click of a checkbox! Here is my solution...

The problem I was having seems similar in scope to that described here:

Thread in Google Groups (aka Usenet)

My problem is this: How can you compare the current background color value of an item on a page to the color you want as a highlight color, and toggle between the two?

The DOM provides access to page object CSS style properties such as background colors and whatnot. In this case, I had a table cell and I wanted to highlight the cell if the checkbox living in the cell was checked, and turn off the highlight if not checked. As with any programming problem, there is more than one way to do this, but my way is a fairly simple idea -- use a function that checks the current state of the cell and toggles the highlight to the other state. For this function, I used a couple of techniques, the ternary operator (love the ternary operator!) and JavaScript DOM methods.

It should be as simple as (in pseudocode):

if the current_bg_color equals highlight_color
  then the new_bg_color is set to the non_highlight_color
  otherwise it is set to the highlight_color

The problem I was having was specifically in comparing the value returned for the DOM functions that get the CSS property "background-color'. For example, if the background color of the cell is set, in the CSS Stylesheet, to "#FFFFFF" (white), FireFox's DOM interpretation was returning a literal value of "rgb(255,255,255)". That is to say, I was getting a string of the rgb() value. The problem with that, then, was that I couldn't compare it to my manually-set hexadecmial values for background color and do a meaningful comparison -- the string, "#FFFFFF", is never equal to the string, "rgb(255,255,255)"!

So I decided to create an empty throwaway element, assign the values I needed to to that, and thus automatically normalize the values that I am comparing to the same thing, no matter what they are getting converted to internally by the browser's DOM implementation.

Example:

function toggle_highlight_section(section_name, notoggle){
    // "hidden_element" is an empty .
    document.getElementById("hidden_element").style.backgroundColor = highlight_bg;
    highlight_bg = document.getElementById("hidden_element").style.backgroundColor;
    current_bg = document.getElementById(section_name).style.backgroundColor;
    if ( notoggle ){
        document.getElementById(section_name).style.backgroundColor = notoggle;
    } else {
        document.getElementById(section_name).style.backgroundColor = ( current_bg == highlight_bg ? default_bg : highlight_bg );
    }
    document.getElementById("person_fname").value = document.getElementById(section_name).style.backgroundColor;
    return false;
}