style.backgroundColor datatype

I need to parse it into rgb

[axlotl]

I've got a large number of sequentially id'd DIV's that I am accessing through a script so I can play with their backgroundColor. My idea was to assign the color to a variable:

baseColor = currentDiv.style.backgroundColor;

Then I parse the returned value, split it into rgb, and act on those values as decimals. Then I concatenate them and transform to hex and reasign.

It doesn't work right. is style.backgroundColor not returned as a hex value? I thought I'd just document.write the returned value to see, but that didn't work because I don't know what the hell I'm doing. Anyway, the topic title is my essential question.

[BlobFisk]

Welcome to WebmasterWorld, axlotl!

I'm not 100% sure what you are trying to do... It seems like you want to:

1. Get the background colour of a div,
   
2. Change it to an RGB value and modify it,
   
3. Reconvert to a Hex value,
   
4. Reassign it to the <div> again?
   

This seems like a lot of work to just change the background colour of an object... or am I missing something?

[axlotl]

Hi, thanks for the quick reply; I'm happy to be here.

That is exactly what I want to do. I knew someone was going to say, "why would you want to do that?" The short answer is: this is how I teach myself things; by playing around with the parts. The long answer is a bit longer, but suffice it to say the color is assigned elsewhere, so the script needs to be able to look at the assigned color before seeing what to do.

[Bernard Marx]

The data type is

String

. All CSS values will be strings.

The simplest way to get information out is to use an alert:

alert(element.style.backgroundColor)

If you want the data type, use

typeof():
alert(typeof(element.style.backgroundColor))

With colours, the form (RGB or hex) you get out will be the one you put in.

Question:

I can see why you are parsing out the values into

Number

type, but why are you using hex?
Wouldn't it be easier to use RGB throughout?

Turning RGB string into

Number

array
(and back again):

String.prototype.RGBsplit = function()
{
 var vals = this.replace(/\(¦\)¦[a-z]/gi,"").split(",") //*! note
 for(var k=0;k<3;k++)
 vals[k] = vals[k]/1
 return vals
}
Array.prototype.toRGB = function(){ return "rgb(" + this.join("") + ")" }
//Use (increase red by 10):
RGB_array = element.style.backgroundColor.RGBsplit()
RGB_array[0] += 10
element.style.backgroundColor = RGB_array.toRGB() 

*! There is a WebmasterWorld bug that turns pipes '¦' into some other character that has a split in the middle.
You will have to put them back yourself. There are two.

I have a script that lets you increment the HSB values of colours if you're interested.

[axlotl]

I've got to say, "wow!"

In 10 years of using other people on the internet for help, I've never received an answer as thorough as this one. The alert tip? That alone is worth the price of signing up. Oh, wait...

Anyway, soberly, Blob nails the problem and gets the "why?" out of the way, then Bernard knocks it out of the park. Thanks, people.

"There are two." -too much!

[axlotl]

Oh, I'm sorry, Bernard asked me a couple questions.
1) I refer you to the final clause of my penultimate sentence in the original post.
2) Yes. It appears it would. In fact: I assumed the DOM would return a hex value for colors, as if that's just the way web pages "saw" colors, even though it was initially assigned as an rgb. In fact, using the alert tip, I see now the color was saved as a string: 'rgb(0, 33, 222)'.

P.S. I also learned not to use that alert method of getting values out from within a loop.......

[Bernard Marx]

Good to see that we're of some use.

BUT

I made a mistake:

Array.prototype.toRGB = function(){ return "rgb(" + this.join([b]""[/b]) + ")" } 

Take out the inverted commas in

join([b]""[/b])

- or you'll get "rgb(1654215)"

P.S. I also learned not to use that alert method of getting values out from within a loop.......

Yes, that can be a killer, but it's often the place that you do want to check values, so here is a workaround that's good to have in your clip library:

In a loop, instead of

alert(val)

, use

if(!confirm(val))break

Here's a trivial example:

arr = [2,3,4,6,7]
for(var k=0;k<arr.length;k++)
{
 if(!confirm(arr[k])) break
}

Clicking 'Cancel' will exit the loop.

Sometimes you might want to continue the loop though. This is a little more complicated:

doConfirm=true
arr = [2,3,4,6,7]
for(var k=0;k<arr.length;k++)
{
 if(doConfirm) &&!confirm(arr[k]))doConfirm=false 
}