My OperaYou need to be logged in to post in the forums. If you do not have an account, please sign up first.
Not able to change the background color in Opera using javascript
Hi,I have the following code to detect an HTML entity's background color:
HTML:
<p class='entry_button' style='background:gray;' id='menu_delete'>some text</p>
Javascript:
function blog_menu_action(blog_menu)
{
var string_match = document.getElementById(blog_menu).style.background;
alert(string_match);
}
In both IE, Chrome and Firefox my function blog_menu_action gives "gray", but in Opera it is "#808080".
Why does it do that when I have explicitly set the background color to gray??
Your assistance would be much appreciated.
Not much to assist with... I suppose Opera does that for one, or both of these reasons:
1. Cross-platform ease of coding... (Lin, Mac, Win, Phones, Mobiles, etc)
2. It's more useful, and consistent, since there are only like 30 predefined colors, compared to the 16 million + possible colors...
A simple match/compare would solve your problem.
if(string_match == 'gray' || string_match == '#808080'){
...
}
If you're dealing with lots of colors, maybe make a function dedicated to that alone, filled with a switch(), or whatever to get the named color, or the real value.
function get_named_color(input){
switch(input){
case '#808080': return 'gray';
default: return input;
}
}
Out of curiosity, does <i>.style.backgroundColor</i> or <i>.currentStyle.background</i> etc... return anything different?
1. Cross-platform ease of coding... (Lin, Mac, Win, Phones, Mobiles, etc)
2. It's more useful, and consistent, since there are only like 30 predefined colors, compared to the 16 million + possible colors...
A simple match/compare would solve your problem.
if(string_match == 'gray' || string_match == '#808080'){
...
}
If you're dealing with lots of colors, maybe make a function dedicated to that alone, filled with a switch(), or whatever to get the named color, or the real value.
function get_named_color(input){
switch(input){
case '#808080': return 'gray';
default: return input;
}
}
Out of curiosity, does <i>.style.backgroundColor</i> or <i>.currentStyle.background</i> etc... return anything different?
MY PC ●MY BUTTONS [TR] ●[EXT] ●QUICK EDIT ●ICON LIST ●[EXT] ●RSS FEED ● FORUM:POSTING RULES ●RULES OF CONDUCT
This has been brought up before: http://my.opera.com/community/forums/topic.dml?id=413381
I personally think Opera's approach is good here. No matter what the background colour of an element is it will always return the same format. While firefox/ie will have to switch into a hex/rgb format when the background colour is not one of the named colours.
I personally think Opera's approach is good here. No matter what the background colour of an element is it will always return the same format. While firefox/ie will have to switch into a hex/rgb format when the background colour is not one of the named colours.
It was a bright, cold day in April...
What happens with HSL(A) or RGB(A) values? Especially the first, since that covers a much larger range than RGB.
The DnD Sanctuary — a safety net for My Opera's demise.
Originally posted by Frenzie:
What happens with HSL(A) or RGB(A) values? Especially the first, since that covers a much larger range than RGB.
I thought HSL was just a transformation of the RGB colour space into another co-ordinate system?
It was a bright, cold day in April...
Originally posted by desic:
I thought HSL was just a transformation of the RGB colour space into another co-ordinate system?
Well, yes. It does cover a greater potential range, however, though I suppose current monitors aren't usually fully utilizing RGB yet anyway. Still, thinking ahead usually doesn't hurt.
The DnD Sanctuary — a safety net for My Opera's demise.
Thanks guys.
I kind of gave up with the conditional statements and went with this code by DeathShadow (thanks Desic for the link) as it was far more efficient and less troublesome (I haven't tried it in IE yet). I have a lot of buttons that I need to perform this on :
Both were the same for me. I was using 2 functions to toggle and untoggle colours already but have now replaced it with the above code.
That was what I thought it would happen using real words instead of Hex codes, just didn't want to work in Opera, however I'm using Chrome most of the time and that will convert it to RGB - even worst!
I kind of gave up with the conditional statements and went with this code by DeathShadow (thanks Desic for the link) as it was far more efficient and less troublesome (I haven't tried it in IE yet). I have a lot of buttons that I need to perform this on :
<script type="text/javascript">
function toggleIt(target) {
if (target.className.indexOf('state_off')==-1) {
target.className=target.className.replace('state_on','state_off');
} else {
target.className=target.className.replace('state_off','state_on');
}
}
</script>
<style type="text/css">
table {
border:1px solid #000;
}
td {
padding:90px;
}
.state_off {
background:#FFF;
}
.state_on {
background:#FF0;
}
</style>
</head><body>
<h1>
Click the cell to change its colour.
</h1>
<table>
<tr>
<td class="state_off" onclick="toggleIt(this);">
Here is the cell
</td>
</tr>
</table>
</body></html>
Out of curiosity, does .style.backgroundColor or .currentStyle.background etc... return anything different?
Both were the same for me. I was using 2 functions to toggle and untoggle colours already but have now replaced it with the above code.
I personally think Opera's approach is good here. No matter what the background colour of an element is it will always return the same format.
That was what I thought it would happen using real words instead of Hex codes, just didn't want to work in Opera, however I'm using Chrome most of the time and that will convert it to RGB - even worst!
Originally posted by samong:
I kind of gave up with the conditional statements and went with this code by DeathShadow (thanks Desic for the link) as it was far more efficient and less troublesome (I haven't tried it in IE yet).
That definitely seems much better to me.
The DnD Sanctuary — a safety net for My Opera's demise.
Forums » General Opera topics » Opera and cross-browser Web design