retreiving fontSize and/or DIV dimensions from linked stylesheet

[Catherine Lynn Smith]

OK, I am learning my way around the new DOM, but I am still at a loss
on finding a few things.

I have an HTML document that links to a stylesheet.

/* START STYLESHEET EXAMPLE */
/* styles/mystyles.css */
..leftnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
font-weight: bold;
}
..leftnav A {
font-weight: bold;
text-decoration: none;
}
/* END STYLESHEET EXAMPLE */

I am using DIV/SPAN combinations to create some floating links built
into 3D layers on the webpage. For example:

<!-- START HTML SNIPPET -->
<link id="styles" href="styles/mystyles.css" rel="stylesheet "
type="text/css">

<div id="lfnav">
<span id="lflink01" style="position :absolute; left:85px; top:107px"
class="leftnav" >
<a href="javascrip t:void(0);" onClick="getLin k(foo);">Foo</a>
</span>
</div>
<!-- END HTML SNIPPET -->

Note that I am only assigning the upper left position of the
associated SPAN style. Ultimately, I am interested in dynamically
placing these based on the number and size of the links put in place.

This would mean that I would have to have a good idea what the width
and height of each DIV (after populated with text) was. I tried using
the associated

document.getEle mentById('lflin k01').style.wid th
and
document.getEle mentById('lflin k01').style.hei ght

but they come back basically null (I used an alert and the alert came
up blank).

The other thing I considered was calculating at least the height based
on the font size. (although the former would be preferred to get
'both' dimensions) Needless to say, I am now curious how to access my
styles as well.

So this brings me to two questions:

1) Can I retreive the here-to-fore unknown width & height of the DIV
'after' it is populated with text of otherwise undetermined
dimensions.

2) How do I access the individual style elements such as fontSize
(such as the above example) where the styles are linked in a
stylesheet?

Any help is greatly appreciated!!!

Catherine Lynn

[Csaba2000]

Re: retreiving fontSize and/or DIV dimensions from linked stylesheet

I am not an expert on these height/width issues, but
you might check out .clientWidth for IE and .offsetWidth
for NN while you are waiting for a more proper answer.

Csaba Gabor

"Catherine Lynn Smith" <klynntg@hotmai l.com> wrote in message news:5fb632c2.0 309151404.71e70 907@posting.goo gle.com...[color=blue]
> OK, I am learning my way around the new DOM, but I am still at a loss
> on finding a few things.
>
> I have an HTML document that links to a stylesheet.
>
> /* START STYLESHEET EXAMPLE */
> /* styles/mystyles.css */
> .leftnav {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 13pt;
> font-weight: bold;
> }
> .leftnav A {
> font-weight: bold;
> text-decoration: none;
> }
> /* END STYLESHEET EXAMPLE */
>
> I am using DIV/SPAN combinations to create some floating links built
> into 3D layers on the webpage. For example:
>
> <!-- START HTML SNIPPET -->
> <link id="styles" href="styles/mystyles.css" rel="stylesheet "
> type="text/css">
>
> <div id="lfnav">
> <span id="lflink01" style="position :absolute; left:85px; top:107px"
> class="leftnav" >
> <a href="javascrip t:void(0);" onClick="getLin k(foo);">Foo</a>
> </span>
> </div>
> <!-- END HTML SNIPPET -->
>
> Note that I am only assigning the upper left position of the
> associated SPAN style. Ultimately, I am interested in dynamically
> placing these based on the number and size of the links put in place.
>
> This would mean that I would have to have a good idea what the width
> and height of each DIV (after populated with text) was. I tried using
> the associated
>
> document.getEle mentById('lflin k01').style.wid th
> and
> document.getEle mentById('lflin k01').style.hei ght
>
> but they come back basically null (I used an alert and the alert came
> up blank).
>
> The other thing I considered was calculating at least the height based
> on the font size. (although the former would be preferred to get
> 'both' dimensions) Needless to say, I am now curious how to access my
> styles as well.
>
> So this brings me to two questions:
>
> 1) Can I retreive the here-to-fore unknown width & height of the DIV
> 'after' it is populated with text of otherwise undetermined
> dimensions.
>
> 2) How do I access the individual style elements such as fontSize
> (such as the above example) where the styles are linked in a
> stylesheet?
>
> Any help is greatly appreciated!!!
>
> Catherine Lynn[/color]

[Catherine Lynn Smith]

Re: retreiving fontSize and/or DIV dimensions from linked stylesheet

Thanks - actually I found that in a similar but unrelated thread not
too long after posting the first message and it seems to be reasonably
accurate enough to suit my needs. I also realized that I might want
to fix at least the width anyway to avoid having to manually place
'br' tags.

I also found currentStyle from the IE DOM but it's not supported in NN
currently and is still debateable if it will make the W3C apparently.
currentStyle appears to be a calculated property and actually
retrieves the information from the DIV rather than off the stylesheet.

So if anyone can fill me in on how to access the various style
settings from the linked stylesheet, I would still appreciate it.
Even the DHTML definative guide from O'Reilly fails to elaborate down
the stylesheet bubble on their heirarchial tree...

KL

"Csaba2000" <news@CsabaGabo r.com> wrote in message news:<bk5g36$nf @dispatch.conce ntric.net>...[color=blue]
> I am not an expert on these height/width issues, but you might
> checkout .offsetWidth for NN[/color]
[color=blue]
> "Catherine Lynn Smith" <klynntg@hotmai l.com> wrote in message news:5fb632c2.0 309151404.71e70 907@posting.goo gle.com...[color=green]
> > I have an HTML document that links to a stylesheet.
> >
> > /* START STYLESHEET EXAMPLE */
> > /* styles/mystyles.css */
> > .leftnav {
> > font-family: Arial, Helvetica, sans-serif;
> > font-size: 13pt;
> > font-weight: bold;
> > }
> > .leftnav A {
> > font-weight: bold;
> > text-decoration: none;
> > }
> > /* END STYLESHEET EXAMPLE */
> >
> > I am using DIV/SPAN combinations to create some floating links built
> > into 3D layers on the webpage. For example:
> >
> > <!-- START HTML SNIPPET -->
> > <link id="styles" href="styles/mystyles.css" rel="stylesheet "
> > type="text/css">
> >
> > <div id="lfnav">
> > <span id="lflink01" style="position :absolute; left:85px; top:107px"
> > class="leftnav" >
> > <a href="javascrip t:void(0);" onClick="getLin k(foo);">Foo</a>
> > </span>
> > </div>
> > <!-- END HTML SNIPPET -->[/color][/color]
[color=blue][color=green]
> > The other thing I considered was calculating at least the height based
> > on the font size. (although the former would be preferred to get
> > 'both' dimensions) Needless to say, I am now curious how to access my
> > styles as well.
> >
> > 2) How do I access the individual style elements such as fontSize
> > (such as the above example) where the styles are linked in a
> > stylesheet?[/color][/color]

[Lasse Reichstein Nielsen]

Re: retreiving fontSize and/or DIV dimensions from linked stylesheet

klynntg@hotmail .com (Catherine Lynn Smith) writes:
[color=blue]
> I also found currentStyle from the IE DOM but it's not supported in NN
> currently and is still debateable if it will make the W3C apparently.
> currentStyle appears to be a calculated property and actually
> retrieves the information from the DIV rather than off the stylesheet.[/color]

The W3C DOM has a different method:

var elemRef = document.getEle mentById("myEle mId");
var cstyle = document.defaul tView.getComput edStyle(elemRef ,null);

This is supported by Mozilla (and therefore also Netscape 6+) and by
Opera 7.20 (still in beta).
[color=blue]
> So if anyone can fill me in on how to access the various style
> settings from the linked stylesheet, I would still appreciate it.
> Even the DHTML definative guide from O'Reilly fails to elaborate down
> the stylesheet bubble on their heirarchial tree...[/color]

Acessing the style sheets themselves is different from accessing the
computed style.

var sheet = document.styleS heets[0]; // first style sheet
var rule = (sheet.rules || sheet.cssRules)[0]; // first rule
alert(rule.sele ctorText);
rule.style.colo r = "red";

The W3C DOM name for the rules collection is "cssRules", but IE uses
"rules".
Works in Mozilla and IE.


For getting the height of an element, any browser that supports
accessing the computed style, also have a non-standard property
called "offsetHeig ht" on the element.

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

[Jim Buyens]

Re: retreiving fontSize and/or DIV dimensions from linked stylesheet

Lasse Reichstein Nielsen <lrn@hotpop.com > wrote in message news:<k78955r4. fsf@hotpop.com> ...[color=blue]
> klynntg@hotmail .com (Catherine Lynn Smith) writes:
>
> For getting the height of an element, any browser that supports
> accessing the computed style, also have a non-standard property
> called "offsetHeig ht" on the element.[/color]

I'm having trouble getting element heights in Netscape 7. The page in
question has these styles:

menu { background-color: #FFEEEE; }
a.menu { background-color: #FFEEEE; display: block; width: 100%;
text-decoration: none; color: #000000; font-weight:bold;
font-size:12px; }
a:hover.menu {background-color: #000000; color: #FFEEEE}

and this HTML:

<table border="1" cellspacing="0" cellpadding="0"
bgcolor="#ffeee e" bordercolor="#c c0000">
<tr>
<td ><span id="menu1" style="position : relative;">
<a onmouseover="op enMenu(1);" class="menu"
href="javascrip t:void(0);">Com mands</a></span></td>
</tr>
</table>

Inside openMenu, the following expressions are all zero:

document.getEle mentById("menu1 ").clientHe ight
document.getEle mentById("menu1 ").offsetHe ight
document.getEle mentById("menu1 ").scrollHe ight

and the expression below equals "auto":

document.defaul tView.getComput edStyle(documen t.getElementByI d("menu1"),
"").getProperty Value("height") )

If I remove "display: block;" from the "menu" style, these
expressions:

document.getEle mentById("menu1 ").offsetHe ight
document.getEle mentById("menu1 ").scrollHe ight

return 14, which is the correct value. However, without "display:
block;" the hyperlink background doesn't fill the span (and hence the
table cell).

How can I get the actual height in pixels of the "menu1" span?

To view the actual page, browse:

http://www.interlacken.com/dhtmlmenu/dhtmlmenu.htm

Jim Buyens