Forum Moderators: open

Message Too Old, No Replies

How to find the backgroundColor of an object?

I set it to 'wheat', but Safari stores it as 'rgb(245, 222, 179)'

         

MichaelBluejay

1:51 pm on Jan 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



When I click a row I call onclick="setRowColor(this)".

That function is:

function setRowColor(theRow) { 
current = theRow.style.backgroundColor;
if (!current ¦¦ current=='white') { color='wheat';}
else { color='white';}
theRow.style.BackgroundColor = color;
}

Works great in IE. But it didn't work in Safari -- it set the row to wheat on the first click but then wouldn't change on further clicks. I troubleshot by making Safari tell me the value of the row with an alert(), and Safari saw the wheat row as "rgb(245, 222, 179)". Huh? I'd rather not do browser sniffing -- is there an easy way to make Safari see a set color as that color name, if that's the way I set it?

I'm wondering if it's only my copy of Safari that's screwed up, because I'm having other weird JavaScript problems with it. For one, after light use Safari will no longer display alert() commands, although all other JavaScript works okay. I have to restart the browser to fix that. Also, when it *does* show alerts, the first line of the alert is http://example.com (with my domain name), in bold. I've never seen that in alerts before. I reset Safari (emptied cache, cleared history and cookies), and downloaded all the latest updates, but that didn't help.

Bernard Marx

3:12 pm on Jan 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've seen another situation like that. Mozilla will always return an upper-case hex string value for colours when probing using:

getComputedStyle(elm, "").getPropertyValue(...)

Here's a String method to normalise all "reasonable" CSS colour values, outputting them all in upper-case #hex

Reasonable values being: #abc, #abcdef or rgb(n,n,n) (case-insensitive).

String.prototype.toCSSHex = function()
{
var out, hx;
/* in rgb() form */
if(this.indexOf('r')+1)
{
hx = this.match(/\d+/g);
out = '#'+
(hx[0]*1).toString(16)+
(hx[1]*1).toString(16)+
(hx[2]*1).toString(16);
}
/* in #hex form */
else
{
/* add #, if missing */
out = this.replace(/^#?/,"#");
/* expand #ABC form to #AABBCC */
if(out.length==4)
out = out.replace(/[0-9a-f]/gi,"$&$&");
}
return out.toUpperCase();
}

alert( "#abc".toCSSHex() )
alert( "rgb(123,89,32)".toCSSHex() )

// use: alert(myElm.style.color.toCSSHex())

Bernard Marx

3:16 pm on Jan 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Oh, but of course it can't do anything about colour keywords - that is unless we supply it with a lookup table. May have to just avoid using them :(

Span

3:44 pm on Jan 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



But it didn't work in Safari

It does in my Safari (2.0.3 on 10.4.4). Background changes on every click.

MichaelBluejay

12:39 pm on Jan 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Okay, thanks everyone for the help. First, I looked it up and the spec is that browsers are *supposed* to return the "rgb(x y z)" format. You can *set* with a color name, but you're gonna get back an rgb set. So I guess I need to just learn to expect that.

Span said my code works for him, implying that Safari knows what color name is assigned to an rgb set. Maybe if I upgraded to 10.4 and Safari 2 it would work for me -- I'm still on 10.3.8 and Safari 1.3.2.

Anway, I'm checking for "value=rgb(...)" now, so at least it's working. Thanks again for the help.

Bernard Marx

1:14 pm on Jan 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



First, I looked it up and the spec is that browsers are *supposed* to return the "rgb(x y z)" format.

Out of interest, which particular spec was that (can you give a pointer)?

The trouble is that they don't (not all, at least).
IE, in most circumstances, returns exactly what you put in to start with
- including CSS attributes that one you have made up for your own entertainment.

<p id="p" style="color:red;bong:tra-la">foo</p>
<script>
var s = document.getElementById('p').style
alert(s.color+"\n"+s.bong)
</script>

MichaelBluejay

1:21 pm on Jan 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I had tried to save it when I first found it so I could share it, but it didn't stay on my clipboard for some reason. There's a chance I mistinterpreted what I read. I did just find this at O'Reilly:

Also be aware that for some CSS properties, different browser versions may return different value types-especially in colors that are specified by CSS syntax other than rgb(r,g,b). For example, if you set the color with a plain-language color name (e.g., orange), the value returned from the browsers may be in a different format. For the most part, if you specify colors in rgb(r,g,b) format, you'll get that back (except in Netscape 6.2).

[oreillynet.com...]

BTW, my app is used only by me, so a Safari-specific solution is good enough.