JasaScript, CSS and reading color properties

[The_CyberShadow]

Subj.

I've written something, but it's hackish.

function rgb(r, g, b)
{
  return (r<<16) + (g<<8) + b;
}

function colorToInt(s)
{
  if(s.charAt(0)=='#' && s.length==7)      // Opera
    return parseInt("0x"+s.substring(1));

  if(s.charAt(0)=='#' && s.length==4)      // IE
    return parseInt("0x"+s.charAt(1)+s.charAt(1)+s.charAt(2)+s.charAt(2)+s.charAt(3)+s.charAt(3));

  if(s.substring(0, 3)=="rgb")             // Netscape / Mozilla
    return eval(s);

  alert(s);                                // WTF
}

[...] var myColor = colorToInt(document.getElementById("myelement").style.color); [...]

Is there a proper way to do this?

[jscheuer1]

That's not bad. What is your object in this? If the color is set in the stylesheet, through inheritance or via attribute, this:

var myColor = colorToInt(document.getElementById("myelement").style.color);

will not pick it up. Also, what will you do with this integer once you have it?

[The_CyberShadow]

Well that's not much of an issue, that particular line I wrote out of my head to show the use of colorToInt.

My goal was to fade a page's background and contents to white, but keeping it proportional.

It's supposed to be for the loading intro of my homepage. You can find a working example of it here: http://maplecenter.net/thecybershadow/ (temporary URL).

[jscheuer1]

Just a tip for simplifying your full code on this, which looks quite impressive and will provide hours of enjoyment trying to fully follow - To get the hex color value of the output of colorToInt(s) or any color represented as such an integer as this and other functions in your code produce:

hexColorValue='#'+colorIntegerValue.toString(16)

[Twey]

Wouldn't it be easier to return an array of three values?

[The_CyberShadow]

hexColorValue='#'+colorIntegerValue.toString(16)

That isn't quite correct. Suppose the value is less than 100000? Then the number would have 5 or less digits. Which is NOT what we want.

If you'll read fader.js on my site further, you'll find this function:

function toColor(i)
{
  var s = i.toString(16)
  while(s.length<6)
    s='0'+s;
  return '#'+s;
}

[jscheuer1]

If you'll read fader.js on my site further, you'll find this function: . . .

. . . which looks quite impressive and will provide hours of enjoyment trying to fully follow . . .

'nuff said?