Trouble retrieving CSS properties via Javascript

I could swear that I've done this before, but suddenly, I seem to be
unable to retrieve the values of CSS properties via Javascript.

For example, take this document:

http://weston.canncentral.org/web_la.../testcase.html

The document is pretty simple. There's a div id'd as "maindiv". It's
got a few CSS properties set on it via an external stylesheet:

#maindiv {
margin: 5% auto;
width: 200px;
height: 200px;
text-align: center;
font-size: 16px;
font-family: arial;
font-weight: bold;
background-color: white;
}

And what I'd like to be able to do, is grab those properties (say, an
element's CSS-defined height) via javascript, using something like
this:

id = 'maindiv';
emt = document.getElementById(id);
emt_height = emt.style.height;

Except this doesn't seem to be working for me. If you click on the
positioned white div in the above document, and compare the source with
the produced output, you'll see what I mean.

Have I just been imagining that you can retrieve these settings, or is
there something I'm doing wrong in this case?

Thanks,

Weston

weston wrote:[color=blue]
> I could swear that I've done this before, but suddenly, I seem to be
> unable to retrieve the values of CSS properties via Javascript.
>
> For example, take this document:
>
> http://weston.canncentral.org/web_la.../testcase.html
>
> The document is pretty simple. There's a div id'd as "maindiv". It's
> got a few CSS properties set on it via an external stylesheet:
>
> #maindiv {
> margin: 5% auto;
> width: 200px;
> height: 200px;
> text-align: center;
> font-size: 16px;
> font-family: arial;
> font-weight: bold;
> background-color: white;
> }
>
> And what I'd like to be able to do, is grab those properties (say, an
> element's CSS-defined height) via javascript, using something like
> this:
>
> id = 'maindiv';
> emt = document.getElementById(id);
> emt_height = emt.style.height;
>
> Except this doesn't seem to be working for me. If you click on the[/color]

The element's style object shows the styles that have been applied
directly to the element's style, not those that are inherited. Use
currentStyle for IE and getComputedStyle for other DOM 2 browsers.

There is a Martin Honnen post here that should help:

<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/f64ec492a152de81/f7a42159d764d522?q=getcomputedstyle+currentStyle&r num=1&hl=en#f7a42159d764d522>

[...]

--
Rob

Ditto to what RobG said, use getComputedStyle() for mozilla ->
http://developer.mozilla.org/en/docs...tComputedStyle
and OBJHERE.runtimeStyle.PROPERTYHERE for IE.

Danny

Quite helpful indeed. Thank you.

But I'm really more than a little puzzled as to why the IE and Moz
developers chose to multiply entities and store the computed style
somewhere else. If it's going to be computed and stored (as it
obviously has to be for rendering purposes), why not keep it in what
would seem to be the intuitive place -- the style property of the
object?

weston wrote:
[color=blue]
> But I'm really more than a little puzzled as to why the IE and Moz
> developers chose to multiply entities and store the computed style
> somewhere else. If it's going to be computed and stored (as it
> obviously has to be for rendering purposes), why not keep it in what
> would seem to be the intuitive place -- the style property of the
> object?[/color]

Because it's *Cascading* Style Sheets.

<http://www.w3.org/TR/CSS2/cascade.html#cascade>

PointedEars

weston wrote:
[color=blue]
> But I'm really more than a little puzzled as to why the IE and Moz
> developers chose to multiply entities and store the computed style
> somewhere else. If it's going to be computed and stored (as it
> obviously has to be for rendering purposes), why not keep it in what
> would seem to be the intuitive place -- the style property of the
> object?[/color]

Because it's *Cascading* Style Sheets.

<http://www.w3.org/TR/CSS2/cascade.html>

PointedEars

On 21/10/2005 22:25, weston wrote:

[snip]
[color=blue]
> If [style data is] going to be computed and stored (as it obviously
> has to be for rendering purposes), why not keep it in what would seem
> to be the intuitive place -- the style property of the object?[/color]

The style object of any given element represents the in-line style
declarations applied to that element. It is equivalent to the style
attribute, so it would be inappropriate for it to reflect computed values.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

"weston" <notsew-reversePreceedingAndRemoveThis@canncentral.org> writes:
[color=blue]
> But I'm really more than a little puzzled as to why the IE and Moz
> developers chose to multiply entities and store the computed style
> somewhere else.[/color]

They didn't. The way to find the computed style of an element, as well
as what the "style" property of an element means, was decided by the
W3C.

The IE developers did make the computed style available on the element
as the "currentStyle" property. The Mozilla developers just followed
the W3C standard (W3C DOM level 2 Style, ECMAScript binding).
[color=blue]
> If it's going to be computed and stored (as it obviously has to be
> for rendering purposes), why not keep it in what would seem to be
> the intuitive place -- the style property of the object?[/color]

Because the "style" property of DOM elements corresponds to the "style"
attribute of HTML elements, and that's not the same as the computed
style.

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

Lasse Reichstein Nielsen wrote:[color=blue]
> They didn't. The way to find the computed style of an
> element, as well as what the "style" property of an
> element means, was decided by the W3C.[/color]

OK. So the developers didn't decide it... the W3C did.
I'm still struggling with the rationale -- it still seems
like an uneccesary multiplication of entities to me.

And multiplication of entities gives browser builders
opportunities to do more things differently. ;)

Michael Winter wrote:[color=blue]
> It is equivalent to the style attribute, so it would be
> inappropriate for it to reflect computed values.[/color]

It might break that particular meaning somewhat, but it
would be very convenient and more compact.

And I'm not convinced the one-to-one equivalence of that meaning
is particularly important. I see the scope of the correspondence
now that it's been pointed out to me, but I didn't have any trouble
concieving the style object as holding *all* the styles applied
to and computed for the element. In fact, that seems to be the
most intuitive reading to me.

The only really good reason I can think of for separating
the two is if there would be some kind of mismatch or collision
between computed/applied styles and inline styles. Is there
a case where this happens?

Thomas 'PointedEars' Lahn wrote:[color=blue]
> Because it's *Cascading* Style Sheets.[/color]

I'm missing the meaning of the koan, perhaps. :)

"weston" <notsew-reversePreceedingAndRemoveThis@canncentral.org> writes:
[color=blue]
> The only really good reason I can think of for separating
> the two is if there would be some kind of mismatch or collision
> between computed/applied styles and inline styles. Is there
> a case where this happens?[/color]

Several.

If the inline style is, e.g., "margin-left: auto", the computed style
will have a margin-left that is the actual pixel count that the
computation yields.

Likewise, a relative size like "font-size:120%", will be computed to a
fixed font-size based on the inherited value that 120% is relative to.

If a style higher in the cascade has a rule like:
body { font-size: 1em !important; }
and the inline style is
<body style="font-size:80%">
then the computed style will have a font-size of 100% (actual example,
I have that rule in my user stylesheet, and too many pages to count
tries to make the body font smaller).

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

Makes sense. I'm convinced.

Even though I still find the whole affair inconvenient. *sigh*

weston wrote:
[color=blue]
> Thomas 'PointedEars' Lahn wrote:[color=green]
>> Because it's *Cascading* Style Sheets.[/color]
>
> I'm missing the meaning of the koan, perhaps. :)[/color]

The cascade makes all the difference, as Lasse explained.
You would have known if you had followed the link.

PointedEars
--
In the First World War, 13 million people were killed. In the Second
World War, 40 million people were killed. I think that if a third war
takes place, nothing is going to be left on the face of earth.
-- Shakira, 2003-02-05 @ MTV.com

RobG wrote:
[color=blue]
> The element's style object shows the styles that have been applied
> directly to the element's style, not those that are inherited. Use
> currentStyle for IE and getComputedStyle for other DOM 2 browsers.
>
> There is a Martin Honnen post here that should help:
> <URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/f64ec492a152de81/f7a42159d764d522?q=getcomputedstyle+currentStyle&r num=1&hl=en#f7a42159d764d522>[/color]

Hmmm. OK, now I'm trying to get the computed height of a div that has
no height explicitly set. Using getComputedStyle on the DOM 2 browsers,
I'm able to retreive this, but under IE, currentStyle seems to be
giving me 'auto'.

I've sortof solved the problem in a stopgap manner by using IE's
offsetHeight property, but I'm wondering if there's a better way.

Here's the functions in which I've buried the
currentStyle/getComputedStyle details. If I'm mis-using currentStyle or
there's a better way, let me know.

function getCompdStyles(emt)
{
var ownerDoc,defaultView;
var returnVal = false;

if(emt)
{
if(emt.currentStyle) // IE
{ returnVal = emt.currentStyle; }
else if ( // DOM 2
(ownerDoc = emt.ownerDocument) &&
(defaultView = ownerDoc.defaultView) &&
(defaultView.getComputedStyle)
)
{ returnVal = defaultView.getComputedStyle(emt,''); }
}

return returnVal;
}

function getCompdStyle(emt,cssprop)
{
var compdStyleObj = getCompdStyles(emt);
if(compdStyleObj)
return compdStyleObj[cssprop];
else
return null;
}