JAvascript & CSS

[forrest]

One question:
How can i access to an element style property if the CSS is linked to the page?

this is the situation:
I have a style TAG with an @import rule. (tried also with LINK).
I get an UL element by getElementById.
I want to store some style information that i set in the external CSS like display, letf and top.
When i try to do that i obtain an empty variable.(i've try to alert its value).

the strange, maybe is not strange, is that when i set the style property by javascript and i read it again i obtain a value...

example:
alert(element.style.display;) // say nothing

element.style.display:"block;";
alert(element.style.display) // say block

Also, in Mozilla works and in Explorer not, but if you set this

anotherelement.onmouseover=function(){
element.style.display:"block;";
alert(element.style.display)
}

it work well for both...

Seems that when you don't set manually the style property Javascript can't read the value from element.

am i wrong?
Can you help me to understand... how i can workaround this problem( a BIG problem from my point of view ). Can you help me to change this point of view? eheh!

Thank in advance.

Ciao
Yuri

[Bernard Marx]

This is a common (and excuseable) misunderstanding.

When you set styles in a stylesheet, you don't affect the style object of each individual element. This only happens when you set styles inline, on the style attribute itself. The same happens when you use Javascript in the normal way.

The easiest solution is to set the CSS properties you are interested in via inline declarations on the elements, or to hard-code the initial values into the script.

However, if you are toggling, and the initial display is "hidden" (via stylesheet) you can do this:

[pre]
function toggleDisplay(elem)
{
 var style = elem.style
 style.display = style.display? "":"block"
}
[/pre]

Initially, there is no value set for the display value (as you have found out!). If it's not set, set it to "block", if it's "block", remove it again, and it will rely on the value set in the stylesheet again.

You can find the actual setting by other means, but it involves some cross-browser scripting:
[webmasterworld.com ]

[forrest]

Now i understand.
So it's not so linear getting a style value... if i want to know width,height or... border... of an element i must to use propretary functions to read the current style or, when is possible, "non-style" related function like "clip.width" or "offsetWidth" etc (i'm a newbie, i read them somewhere, but i don't studied them yet, so i don't know well what i'm talking about). It is right?

Now i understand why "cross-browsing" is so important also in the latest browsers version...
mmhhh... and the wiseman says ...i have to work hard... eheh

thanks.

Yuri

[Bernard Marx]

if i want to know width,height or... border... of an element i must to use propretary functions to read the current style

Not always. Only if the style property you want to query has been set via a stylesheet. If it is inline - is set on the element's own style object - then you can read it via

element.style

.

"non-style" related function like "clip.width" or "offsetWidth"

clip is a CSS property.
Yes, using

offsetWidth

is an alternative. Remember that it doesn't always reflect the actual style value. If a container is too small for its content, then it will elongate to fit it in. Then the declared

height

will be smaller than the

offsetHeight

.

offsetLeft/Top

properties can be complicated to use, and give slightly different results amongst different browsers in some circumstances.

[forrest]

OK, now it's clear.
I've try to use CurrentStyle and getComputedStyle for crossbrowsing. It works as i expect for IE and Mozilla. Now i understand, but probably my approach to the problemis wrong. It's easier to start from another direction like your method, changing the class attribute to another CSS class, or to preset the style info inline or by scripting before use them. n easier solution.

Ciao
Yuri