• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

dynamic color

 
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

I'm looking for a way to dynamically change the color of an HTML element using CSS and Javascript, by changing an element's current RGB values. At the moment, I'm setting the color of an element which has an id of "tab1" with the line:

document.getElementById("tab1").style.backgroundColor="#D6B20A";

but then, if I do

alert(document.getElementById("tab1").style.backgroundColor)

instead of being presented with "#D6B20A", I get "rgb(214, 178, 10)".

It would be fine if I could set the red, green and blue attributes separately, or if I just had the hexadecimal code to change, but at the moment I seem to have a mixture of both, which is not making things easy.

Is there some way I can work with either hexadecimal codes, or individual RGB values, but not both?

Thanks for any help provided.

Graham.
[ August 09, 2004: Message edited by: Graham Clark ]
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The property shows whatever is stored into the property. If you store the rbg then you get that, if you store the hex, you get that.

If you want tpo go between the two, then you need to use a function that converts them. If you search google, there are plenty of JavaScripts that convert from Hex.

Eric
 
Graham Clark
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
But, I set the property as hex, but got back rgb!

My problem isn't converting between hex and rgb, though.
What I want is to set an element with an initial color, and then get that color when the user triggers some event, then change the color by, say, subtracting 10 from the red value. How can I do this?
sorry if i didn't explain this well previously.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

But, I set the property as hex, but got back rgb!



What browser is this happening in?
 
Graham Clark
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
ok, I just realised that this only seems to happen in Firefox 0.9.3, not Internet Explorer (6). So I guess it's a browser bug.

So if I want to set the color as an RGB value, can I use some function like the one Firefox seems to return to me? It gives "rgb(x, y, z)", so is there a function rgb() somewhere in Javascript?
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
you can set colors with the rgb, it is part of the CSS so you can adjust the colors easier.

Below is a simple script for changing the background color.



Eric
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic