retreiving fontSize and/or DIV dimensions from linked stylesheet

Discussion in 'Javascript' started by Catherine Lynn Smith, Sep 15, 2003.

  1. 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
     
    Catherine Lynn Smith, Sep 15, 2003
    #1
    1. Advertisements

  2. Catherine Lynn Smith

    Csaba2000 Guest

    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
     
    Csaba2000, Sep 15, 2003
    #2
    1. Advertisements

  3. 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
     
    Catherine Lynn Smith, Sep 16, 2003
    #3
  4. 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).
    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
     
    Lasse Reichstein Nielsen, Sep 16, 2003
    #4
  5. Catherine Lynn Smith

    Jim Buyens Guest

    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
     
    Jim Buyens, Sep 20, 2003
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.