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="javascript:void(0);" onClick="getLink(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.getElementById('lflink01').style.width
and
document.getElementById('lflink01').style.height

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]

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]

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

 

[Lasse Reichstein Nielsen]

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.

The W3C DOM has a different method:

var elemRef = document.getElementById("myElemId");
var cstyle = document.defaultView.getComputedStyle(elemRef,null);

This is supported by Mozilla (and therefore also Netscape 6+) and by
Opera 7.20 (still in beta).

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...

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

var sheet = document.styleSheets[0]; // first style sheet
var rule = (sheet.rules || sheet.cssRules)[0]; // first rule
alert(rule.selectorText);
rule.style.color = "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 "offsetHeight" on the element.

/L

 

[Jim Buyens]

(e-mail address removed) (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 "offsetHeight" on the element.

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="#ffeeee" bordercolor="#cc0000">
<tr>
<td ><span id="menu1" style="position: relative;">
<a onmouseover="openMenu(1);" class="menu"
href="javascript:void(0);">Commands</a></span></td>
</tr>
</table>

Inside openMenu, the following expressions are all zero:

document.getElementById("menu1").clientHeight
document.getElementById("menu1").offsetHeight
document.getElementById("menu1").scrollHeight

and the expression below equals "auto":

document.defaultView.getComputedStyle(document.getElementById("menu1"),
"").getPropertyValue("height"))

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

document.getElementById("menu1").offsetHeight
document.getElementById("menu1").scrollHeight

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