Cascade problem with DOM & CSS?

Pieter Van Waeyenberge · Feb 9, 2004

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.

Bas Cost Budde · Feb 9, 2004

Pieter Van Waeyenberge wrote:

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

Martin Honnen · Feb 9, 2004

Pieter said:
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')

Pieter Van Waeyenberge · Feb 9, 2004

thnx!

Pieter

DU · Feb 9, 2004

Pieter said:
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

Trouble with css	4	Mar 20, 2020
Positioning CSS components	1	Nov 16, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Stuck with html and css	25	Dec 14, 2022
Need help with code on website (noob)	2	Jul 18, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022

Cascade problem with DOM & CSS?

Pieter Van Waeyenberge

Bas Cost Budde

Martin Honnen

Pieter Van Waeyenberge

DU

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads