469,964 Members | 1,492 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,964 developers. It's quick & easy.

Problems accessing CSS attributes with JS

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

Jul 20 '05 #1
4 1854

"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
Jul 20 '05 #2
"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
Jul 20 '05 #3
"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.'
Jul 20 '05 #4
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.'

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Jon Dellaria | last post: by
3 posts views Thread by Musravus | last post: by
3 posts views Thread by John Dann | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.