Problems accessing CSS attributes with JS

[Mike Clair]

Hey,

I'm having an issue with CSS, JS and the DOM. It's gonna drive me batty. I
am trying to access the properties of a layer in JS which have been
initially set in an external CSS. The problem is that for some reason JS
isn't receiving NULL for all the properties of the layer. For instance:

HTML
<div id="blarg">.....</div>

JS
var t = document.getElementById("blarg").style.left;

CSS
#blarg{
position: absolute;
left: 200px;
}

t == NULL and I can't figure out why. It is this way for any CSS attribute
I attempt to read (width, positional, the whole kit and caboodle).

It does work if I set the attribute in JS before I read it.

JS
document.getElementById("blarg").style.left = 30;
var t = document.getElementById("blarg").style.left;

t now == 30. The only thing I can think of to explain this is that when
the document gets loaded my layers aren't getting their attributes filled
out. The object gets created and the attribute fields are blank until I
fill them in. Thusly my creation of CSS's was a waste of time. Grr...

Any ideas/suggestions? Google has been of no help. :-( This is occurring in
IE 6, and the gecko engine
browsers.

Mike

[Silvio Bierman]

"Mike Clair" <th************@BLARGshaw.ca> wrote in message
news:f7P_b.594347$JQ1.432494@pd7tw1no...

Hey,

I'm having an issue with CSS, JS and the DOM. It's gonna drive me batty. I
am trying to access the properties of a layer in JS which have been
initially set in an external CSS. The problem is that for some reason JS
isn't receiving NULL for all the properties of the layer. For instance:

HTML
<div id="blarg">.....</div>

JS
var t = document.getElementById("blarg").style.left;

CSS
#blarg{
position: absolute;
left: 200px;
}

t == NULL and I can't figure out why. It is this way for any CSS attribute
I attempt to read (width, positional, the whole kit and caboodle).

It does work if I set the attribute in JS before I read it.

JS
document.getElementById("blarg").style.left = 30;
var t = document.getElementById("blarg").style.left;

t now == 30. The only thing I can think of to explain this is that when
the document gets loaded my layers aren't getting their attributes filled
out. The object gets created and the attribute fields are blank until I
fill them in. Thusly my creation of CSS's was a waste of time. Grr...

Any ideas/suggestions? Google has been of no help. :-( This is occurring in IE 6, and the gecko engine
browsers.

Mike

Mike,

Styles and standard HTML attributes are not filled out. There are some
dynamic properties that are determined when rendering the page (offsetLeft,
offsetTop, offsetWidth, offsetHeight come to mind but that might be only in
IE) but most other properties like "width", "height" (both the CSS styles as
the HTML attributes) are not dynamic in that sense.

Silvio Bierman

[Mike Clair]

"Silvio Bierman" <sb******@idfix.nl> wrote in message
news:40*********************@news.xs4all.nl...

Mike,

Styles and standard HTML attributes are not filled out. There are some
dynamic properties that are determined when rendering the page (offsetLeft, offsetTop, offsetWidth, offsetHeight come to mind but that might be only in IE) but most other properties like "width", "height" (both the CSS styles as the HTML attributes) are not dynamic in that sense.

Silvio Bierman

Thanks for the super timely response. :-)

I need these attributes to be dynamic because I have a course assignment to
implement drag and drop in JS. I suppose the only way to do this would be to
fill out the properties with JS.

Is there any way to force the browser to fill out these properties when
rendering? (Prolly not cuz if there was you would have told me)

If not, I guess I'll just set the page up with an initialization method
onLoad. An external CSS was more elegant though. If you have any other ideas
on how I can implement this differently I'm very welcome to suggestions.

Thanks.

Mike

[Lasse Reichstein Nielsen]

"Mike Clair" <th************@BLARGshaw.ca> writes:

I'm having an issue with CSS, JS and the DOM. It's gonna drive me batty. I
am trying to access the properties of a layer
Layer? Ah, you mean a named division, not the Netscape 4 tag <layer>.
in JS which have been initially set in an external CSS. The problem
is that for some reason JS isn't receiving NULL for all the
properties of the layer. For instance:

HTML
<div id="blarg">.....</div>

JS
var t = document.getElementById("blarg").style.left;
This accesses the style object of the blarg element. It corresponds to
the style assignments made in the style attribute of HTML tag. It does
not reflect the effective style of the element or the global stylesheets.

To get the actual style, use either the W3C DOM standard:
var blarg= document.getElementById("blarg")
var t = document.defaultView.getComputedStyle(blarg,"").le ft;
(works in Mozilla and recent Opera) or the proprietary IE method:
var t = document.getElementById("blarg").currentStyle.left ;
It does work if I set the attribute in JS before I read it.
Yes. You assign it to the element's style object, which has the
highest priority of CSS styles (except the user's !important rules),
so it takes effect and is accessible from that object again.
t now == 30.
I would hope it is "30px", and a string.
Any ideas/suggestions? Google has been of no help. :-( This is
occurring in IE 6, and the gecko engine browsers.

It is correct behavior.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Mike Clair]

Thanks. I guess I should have thought of the CSS style hierarchy, oh well.
That solved my problem nicely.

Mike

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:sm**********@hotpop.com...

"Mike Clair" <th************@BLARGshaw.ca> writes:

I'm having an issue with CSS, JS and the DOM. It's gonna drive me batty. I am trying to access the properties of a layer
Layer? Ah, you mean a named division, not the Netscape 4 tag <layer>.

in JS which have been initially set in an external CSS. The problem
is that for some reason JS isn't receiving NULL for all the
properties of the layer. For instance:

HTML
<div id="blarg">.....</div>

JS
var t = document.getElementById("blarg").style.left;

This accesses the style object of the blarg element. It corresponds to
the style assignments made in the style attribute of HTML tag. It does
not reflect the effective style of the element or the global stylesheets.

To get the actual style, use either the W3C DOM standard:
var blarg= document.getElementById("blarg")
var t = document.defaultView.getComputedStyle(blarg,"").le ft;
(works in Mozilla and recent Opera) or the proprietary IE method:
var t = document.getElementById("blarg").currentStyle.left ;

It does work if I set the attribute in JS before I read it.

Yes. You assign it to the element's style object, which has the
highest priority of CSS styles (except the user's !important rules),
so it takes effect and is accessible from that object again.

t now == 30.

I would hope it is "30px", and a string.

Any ideas/suggestions? Google has been of no help. :-( This is
occurring in IE 6, and the gecko engine browsers.

It is correct behavior.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors:

<URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html> 'Faith without judgement merely degrades the spirit divine.'