468,103 Members | 1,175 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

Cascade problem with DOM & CSS?

Hello

consider:
<html>
<head>
<style type="text/css">
body{margin:50px;}
</style>
....
<body> ...

When i get a handle for the body (using DOM: doc.getElsByTagName ...
item(0))
and i try to read style.margin from the body, i get an empty string

However, when i specify the style info directly in the BODY element <body
style="margin:50px;"> , and then i read out style.margin ... i get my value
50px

? i dont know how the parsers work but after specifying style info whichever
way, is should be available in the object model shouldnt it???

Aparently both ie and ns behave the same on this ...

Ultimately i want to position elements absolutely but 'offsetLeft/Top'
doesnt relate to 'margin'

PIeter.
Jul 20 '05 #1
4 1254
Pieter Van Waeyenberge wrote:

Do currentStyle (IE) and getComputedStyle (NS/Moz) help you out?

--
Bas Cost Budde
http://www.heuveltop.org/BasCB
but the domain is nl

Jul 20 '05 #2


Pieter Van Waeyenberge wrote:
consider:
<html>
<head>
<style type="text/css">
body{margin:50px;}
</style>
...
<body> ...

When i get a handle for the body (using DOM: doc.getElsByTagName ...
item(0))
and i try to read style.margin from the body, i get an empty string


Yes,
elementObject.style
only reflects what is set as an inline style (or later on with script),
it it not a cascaded or a computed style value.
IE provides
elementObject.currentStyle
W3C DOM compliant browsers like Mozilla or Opera 7 have
window.getComputedStyle(elementObject,
'').getPropertyValue('css-property-name')

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #3
thnx!

Pieter

"Pieter Van Waeyenberge" <p@foo.com> wrote in message
news:40*********************@news.skynet.be...
Hello

consider:
<html>
<head>
<style type="text/css">
body{margin:50px;}
</style>
...
<body> ...

When i get a handle for the body (using DOM: doc.getElsByTagName ...
item(0))
and i try to read style.margin from the body, i get an empty string

However, when i specify the style info directly in the BODY element <body
style="margin:50px;"> , and then i read out style.margin ... i get my value 50px

? i dont know how the parsers work but after specifying style info whichever way, is should be available in the object model shouldnt it???

Aparently both ie and ns behave the same on this ...

Ultimately i want to position elements absolutely but 'offsetLeft/Top'
doesnt relate to 'margin'

PIeter.

Jul 20 '05 #4
DU
Pieter Van Waeyenberge wrote:
Hello

consider:
<html>
<head>
<style type="text/css">
body{margin:50px;}
</style>
...
<body> ...

When i get a handle for the body (using DOM: doc.getElsByTagName ...
item(0))
HTML documents only allow 1 body element. So, parsing the collection of
body nodes unneedlessly takes time to be executed. Just
document.body
access the body node immediately. Much more efficient that way.
and i try to read style.margin from the body, i get an empty string

However, when i specify the style info directly in the BODY element <body
style="margin:50px;"> , and then i read out style.margin ... i get my value
50px

? i dont know how the parsers work but after specifying style info whichever
way, is should be available in the object model shouldnt it???
There is nothing to parse really. Just to access.

Aparently both ie and ns behave the same on this ...

Ultimately i want to position elements absolutely but 'offsetLeft/Top'
doesnt relate to 'margin'
You'll need to take under consideration the borders on the root element
for MSIE 6 in standards compliant rendering mode and the padding on the
body for Opera 7.x

PIeter.

offsetLeft and offsetTop are DOM extensions and refer to MSIE's DHTML
object model. offsetLeft and offsetTop have not per se to do with css
rules, stylesheets, css properties.

Here's how to access the margin property values as set in a local
stylesheet (such stylesheet must be the only stylesheet, otherwise you
need to set the index accordingly: document.styleSheets[index])

if(document.styleSheets[0] && "cssRules" in document.styleSheets[0])
// DOM 2 Stylesheet compliant
{
alert("Margins on the body are: " +
document.styleSheets[0].cssRules[0].style.margin);
}
else if(document.styleSheets[0] && "rules" in document.styleSheets[0])
// MSIE
{
alert("Margins on the body are: " +
document.styleSheets[0].rules[0].style.margin);
};

getComputedStyle is good only when the margins have not been set or have
been modified dynamically by the user.

DU
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Fraser Hanson | last post: by
2 posts views Thread by Gunnar VÝyenli | last post: by
2 posts views Thread by P.B. via SQLMonster.com | last post: by
3 posts views Thread by Tim Marshall | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.