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.getEle mentById("blarg ").style.le ft;

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.getEle mentById("blarg ").style.le ft = 30;
var t = document.getEle mentById("blarg ").style.le ft;

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]

Re: Problems accessing CSS attributes with JS


"Mike Clair" <theclairREMOVE @BLARGshaw.ca> wrote in message
news:f7P_b.5943 47$JQ1.432494@p d7tw1no...[color=blue]
> 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.getEle mentById("blarg ").style.le ft;
>
> 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.getEle mentById("blarg ").style.le ft = 30;
> var t = document.getEle mentById("blarg ").style.le ft;
>
> 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[/color]
in[color=blue]
> IE 6, and the gecko engine
> browsers.
>
> Mike
>
>
>[/color]

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]

Re: Problems accessing CSS attributes with JS

"Silvio Bierman" <sbierman@idfix .nl> wrote in message
news:403bc535$0 $575$e4fe514c@n ews.xs4all.nl.. .[color=blue]
>
>
> Mike,
>
> Styles and standard HTML attributes are not filled out. There are some
> dynamic properties that are determined when rendering the page[/color]
(offsetLeft,[color=blue]
> offsetTop, offsetWidth, offsetHeight come to mind but that might be only[/color]
in[color=blue]
> IE) but most other properties like "width", "height" (both the CSS styles[/color]
as[color=blue]
> the HTML attributes) are not dynamic in that sense.
>
> Silvio Bierman[/color]

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]

Re: Problems accessing CSS attributes with JS

"Mike Clair" <theclairREMOVE @BLARGshaw.ca> writes:
[color=blue]
> 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[/color]

Layer? Ah, you mean a named division, not the Netscape 4 tag <layer>.
[color=blue]
> 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.getEle mentById("blarg ").style.le ft;[/color]

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.getEle mentById("blarg ")
var t = document.defaul tView.getComput edStyle(blarg," ").left;
(works in Mozilla and recent Opera) or the proprietary IE method:
var t = document.getEle mentById("blarg ").currentStyle .left;
[color=blue]
> It does work if I set the attribute in JS before I read it.[/color]

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.
[color=blue]
> t now == 30.[/color]

I would hope it is "30px", and a string.
[color=blue]
> Any ideas/suggestions? Google has been of no help. :-( This is
> occurring in IE 6, and the gecko engine browsers.[/color]

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

[Mike Clair]

Re: Problems accessing CSS attributes with JS

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

Mike

"Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
news:smh0hsjt.f sf@hotpop.com.. .[color=blue]
> "Mike Clair" <theclairREMOVE @BLARGshaw.ca> writes:
>[color=green]
> > I'm having an issue with CSS, JS and the DOM. It's gonna drive me batty.[/color][/color]
I[color=blue][color=green]
> > am trying to access the properties of a layer[/color]
>
> Layer? Ah, you mean a named division, not the Netscape 4 tag <layer>.
>[color=green]
> > 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.getEle mentById("blarg ").style.le ft;[/color]
>
> 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.getEle mentById("blarg ")
> var t = document.defaul tView.getComput edStyle(blarg," ").left;
> (works in Mozilla and recent Opera) or the proprietary IE method:
> var t = document.getEle mentById("blarg ").currentStyle .left;
>[color=green]
> > It does work if I set the attribute in JS before I read it.[/color]
>
> 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.
>[color=green]
> > t now == 30.[/color]
>
> I would hope it is "30px", and a string.
>[color=green]
> > Any ideas/suggestions? Google has been of no help. :-( This is
> > occurring in IE 6, and the gecko engine browsers.[/color]
>
> It is correct behavior.
> /L
> --
> Lasse Reichstein Nielsen - lrn@hotpop.com
> DHTML Death Colors:[/color]
<URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>[color=blue]
> 'Faith without judgement merely degrades the spirit divine.'[/color]