Opera and dynamic style change.. this must be a joke..

[Piotr K]

Ok, I tried simply everything that came to my mind and now I ran out
of ideas, but to the point - take a look at the code below

// GetStyle returns given style value (works fine)
document.getElementById("inner").style.backgroundColor =
GetStyle("box", "backgroundColor");
document.getElementById("box").style.backgroundColor = "transparent";

<div id="box" style="width: 100px; height: 100px; background-color:
Red">
<div id="inner" style="width: 50px; height: 50px"></div>
</div>

What this code do - it retrieves "background-color" style from "box"
element, assigns it to "inner" and then "box" background gets
transparent. Now the funny part - it works in every browser, except
Opera, where both elements gets transparent background. What's even
more funny, when I replace GetStyle(...) with string "Red" it works
fine (GetStyle also returns string). Can someone explain me what is
going on? It's so illogical that I'm starting to think that maybe this
is a bug in Opera..

Thanks for any help,
P.

 

[Henry]

Ok, I tried simply everything that came to my mind and now I ran
out of ideas, but to the point - take a look at the code below

// GetStyle returns given style value (works fine)
document.getElementById("inner").style.backgroundColor =
GetStyle("box", "backgroundColor");
document.getElementById("box").style.backgroundColor = "transparent";

<div id="box" style="width: 100px; height: 100px; background-color:
Red">
<div id="inner" style="width: 50px; height: 50px"></div>
</div>

What this code do - it retrieves "background-color" style
from "box" element, assigns it to "inner" and then "box"
background gets transparent. Now the funny part - it works
in every browser, except Opera, where both elements gets
transparent background. What's even more funny, when I
replace GetStyle(...) with string "Red" it works fine
(GetStyle also returns string). Can someone explain
me what is going on? It's so illogical that I'm starting
to think that maybe this is a bug in Opera..

Thanks for any help,

I don't know what help you expect. You have not included the code
necessary for anyone else to even attempt to reproduce your symptoms,
let alone attribute cause and effect relationships to them. And no
matter how effective you assert your - GetStyle - function to be I bet
most would like to see the code in question and verify its suitability/
reliability for themselves.

 

[pr]

Ok, I tried simply everything that came to my mind and now I ran out
of ideas, but to the point - take a look at the code below

// GetStyle returns given style value (works fine)
document.getElementById("inner").style.backgroundColor =
GetStyle("box", "backgroundColor");

What is GetStyle()?

document.getElementById("box").style.backgroundColor = "transparent";

<div id="box" style="width: 100px; height: 100px; background-color:
Red">
<div id="inner" style="width: 50px; height: 50px"></div>
</div>

What this code do - it retrieves "background-color" style from "box"
element, assigns it to "inner" and then "box" background gets
transparent. Now the funny part - it works in every browser, except
Opera, where both elements gets transparent background. What's even
more funny, when I replace GetStyle(...) with string "Red" it works
fine (GetStyle also returns string). Can someone explain me what is
going on? It's so illogical that I'm starting to think that maybe this
is a bug in Opera..

Maybe it is, maybe it isn't. Post the code for GetStyle() and we might
be able to tell.

 

[Piotr K]

What is GetStyle()?




Maybe it is, maybe it isn't. Post the code for GetStyle() and we might
be able to tell.

Here's the GetStyle code:

function GetStyle(obj, style) {
obj = document.getElementById(obj);

if(style == "opacity") return GetOpacity(obj);

if(obj.currentStyle) return obj.currentStyle[style];
else if(window.getComputedStyle) return getComputedStyle(obj,
"").getPropertyValue(style.replace(/[A-Z]/g, function(obj, ch) {return
"-"+style.charAt(ch).toLowerCase()}));
}

However I don't think this has anything to do with that strange
behaviour. In the example I posted earlier it returns simply "Red", so
in other words

GetStyle("box", "backgroundColor") == "Red"

When I use GetStyle, the background gets transparent under Opera, but
if I replace it with simply "Red" string everything works fine. I
thought there may be some kind of referencing going on under Opera,
but I tried even copying each character from GetStyle return value to
array and than joining it into completely new string - still the same
effect.

 

[VK]

document.getElementById("box").style.backgroundColor = "transparent";

"transparent" is an imaginary value. It was used in W3C docs to
describe an element that has no color property set, like "transparent
element", but it was not meant to be an actual string to assign to the
style. Now it is supported by some newer browsers due to misreading
some badly written W3C samples. Neither Opera not IE6 are one of them.

Never Ever In Your Life put style rules to their default values by
any explicit assignment: because you never in your life can guess what
explicit assignment is expected by some particular UA (think of the
infamous table element display glitch). Always use empty string
instead: this way any UA will restore what it needs by itself.

document.getElementById('box').style.backgroundColor = '';

 

[pr]

Here's the GetStyle code:

function GetStyle(obj, style) {
obj = document.getElementById(obj);

if(style == "opacity") return GetOpacity(obj);

if(obj.currentStyle) return obj.currentStyle[style];
else if(window.getComputedStyle) return getComputedStyle(obj,
"").getPropertyValue(style.replace(/[A-Z]/g, function(obj, ch) {return
"-"+style.charAt(ch).toLowerCase()}));
}

However I don't think this has anything to do with that strange
behaviour. In the example I posted earlier it returns simply "Red", so
in other words

GetStyle("box", "backgroundColor") == "Red"

Not quite. It appears in fact to return '"red"' - that is, a string
containing double quote marks, which is not a sensible input for
style.backgroundColor. Try this, for example:

alert("*" + GetStyle("box", "backgroundColor") + "*");

Opera doesn't do it after the value has been set in code to
'transparent', so you may have to do a bit of research to find out when
it occurs. My guess is when you use a named colour.

A troublesome one to spot.

 

[Piotr K]

Here's the GetStyle code:

function GetStyle(obj, style) {
obj = document.getElementById(obj);

if(style == "opacity") return GetOpacity(obj);

if(obj.currentStyle) return obj.currentStyle[style];
else if(window.getComputedStyle) return getComputedStyle(obj,
"").getPropertyValue(style.replace(/[A-Z]/g, function(obj, ch) {return
"-"+style.charAt(ch).toLowerCase()}));
}

However I don't think this has anything to do with that strange
behaviour. In the example I posted earlier it returns simply "Red", so
in other words

GetStyle("box", "backgroundColor") == "Red"

Not quite. It appears in fact to return '"red"' - that is, a string
containing double quote marks, which is not a sensible input for
style.backgroundColor. Try this, for example:

alert("*" + GetStyle("box", "backgroundColor") + "*");

Opera doesn't do it after the value has been set in code to
'transparent', so you may have to do a bit of research to find out when
it occurs. My guess is when you use a named colour.

A troublesome one to spot.

You're absolutely right, all because of double quote marks returned by
GetStyle, I can't believe I missed that, thank you sooo much - now
everything works fine

Thanks for all responses!

 

[Thomas 'PointedEars' Lahn]

"transparent" is an imaginary value. It was used in W3C docs to describe
an element that has no color property set, like "transparent element",
but it was not meant to be an actual string to assign to the style.

Wrong on all accounts, see

http://www.w3.org/TR/CSS2/colors.html#background-properties
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties

Now it is supported by some newer browsers due to misreading some badly
written W3C samples. Neither Opera not IE6 are one of them.

Or maybe, just *maybe*, you are simply completely wrong *again* because both
user agents do support that string value. I guess it does not bother you to
be corrected all the time because a simple test -- like

var elemRef = document.body.getElementsByTagName("*")[0];
if (elemRef && typeof elemRef.style != "undefined")
{
elemRef.style.backgroundColor = "red";
window.alert("Now it should have a red background.");
elemRef.style.backgroundColor = "transparent";
window.alert("Now it should have a transparent background.");
}

-- before making further wild assumptions would have sufficed.

Nevertheless, your stating nonsense has been helpful this time as I could
find out that the `style' property and the shorthand CSS properties (for
example elemRef.style.backgroundColor) are in fact supported by W3C DOM
Level 2 CSS and _not_ a (fully) proprietary feature as I thought before.


PointedEars

 

[VK]

Wrong on all accounts, see

http://www.w3.org/TR/CSS2/colors.html#background-properties
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties

Some day I will maybe understand how anything written on W3C may force
to work it on browser X. Some day...

I guess it does not bother you to
be corrected all the time because a simple test -- like

var elemRef = document.body.getElementsByTagName("*")[0];
if (elemRef && typeof elemRef.style != "undefined")
{
elemRef.style.backgroundColor = "red";
window.alert("Now it should have a red background.");
elemRef.style.backgroundColor = "transparent";
window.alert("Now it should have a transparent background.");
}

So it works now, even on IE6? Great. I still highly suggest never use
direct assignments for rule reset: use "" instead. Nobody is obligated
to follow this advise of course.

Nevertheless, your stating nonsense has been helpful this time as I could
find out that the `style' property and the shorthand CSS properties (for
example elemRef.style.backgroundColor) are in fact supported by W3C DOM
Level 2 CSS and _not_ a (fully) proprietary feature as I thought before.

Since DOM 1 to be exact. But better later than never

 

[Thomas 'PointedEars' Lahn]

Some day I will maybe understand how anything written on W3C may force
to work it on browser X. Some day...

It is *implemented as specified*, Often Wrong.

I guess it does not bother you to
be corrected all the time because a simple test -- like

var elemRef = document.body.getElementsByTagName("*")[0];
if (elemRef && typeof elemRef.style != "undefined")
{
elemRef.style.backgroundColor = "red";
window.alert("Now it should have a red background.");
elemRef.style.backgroundColor = "transparent";
window.alert("Now it should have a transparent background.");
}

So it works now, even on IE6?

Now? Even? It works with *all* IE versions that support the `style'
property, so since version 4.0 (documented and tested). Your attempts to
conceal your cluelessness are even more ridiculous than your clueless
boasting itself is.

Great. I still highly suggest never use direct assignments for rule reset:
use "" instead. Nobody is obligated to follow this advise of course.

I would hope so, because your advice does not present an equivalent solution
at all. Assigning the empty string resets the style property to its initial
value (which ISTM to be a proprietary feature, CMIIW), but the cascade may
cause the computed value of the property to be a completely different one.

Since DOM 1 to be exact. But better later than never

Wrong again. W3C DOM Level 1 only reserved the `style' attribute of the
HTMLElement interface for future use, and it did not include a section on
CSS interfaces. Furthermore, W3C DOM Level 1 HTML is rendered (and marked)
obsolete by DOM Level 2 HTML since quite a while.

http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-011100101
http://www.w3.org/TR/DOM-Level-2-HTML/ ("Status of this document", "Note:")

Someone like you who continuously fails to get the basic facts right should
be *very* slow to boast. Probably someone has told you that before.


PointedEars