By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,869 Members | 1,756 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,869 IT Pros & Developers. It's quick & easy.

Problems accessing CSS attributes with JS

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a

"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

P: n/a
"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

P: n/a
"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

P: n/a
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.