Trouble retrieving CSS properties via Javascript

Discussion in 'Javascript' started by weston, Oct 21, 2005.

  1. weston

    weston Guest

    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_lab/fetching_css_props_via_js/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, Oct 21, 2005
    #1
    1. Advertising

  2. weston

    RobG Guest

    weston wrote:
    > 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_lab/fetching_css_props_via_js/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


    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&rnum=1&hl=en#f7a42159d764d522>


    [...]


    --
    Rob
     
    RobG, Oct 21, 2005
    #2
    1. Advertising

  3. weston

    weston Guest

    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, Oct 21, 2005
    #3
  4. weston wrote:

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


    Because it's *Cascading* Style Sheets.

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


    PointedEars
     
    Thomas 'PointedEars' Lahn, Oct 21, 2005
    #4
  5. weston wrote:

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


    Because it's *Cascading* Style Sheets.

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


    PointedEars
     
    Thomas 'PointedEars' Lahn, Oct 21, 2005
    #5
  6. On 21/10/2005 22:25, weston wrote:

    [snip]

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


    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.
     
    Michael Winter, Oct 21, 2005
    #6
  7. "weston" <> writes:

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


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

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


    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 -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Oct 21, 2005
    #7
  8. weston

    weston Guest

    Lasse Reichstein Nielsen wrote:
    > 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.


    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:
    > It is equivalent to the style attribute, so it would be
    > inappropriate for it to reflect computed values.


    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:
    > Because it's *Cascading* Style Sheets.


    I'm missing the meaning of the koan, perhaps. :)
     
    weston, Oct 21, 2005
    #8
  9. "weston" <> writes:

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


    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 -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Oct 22, 2005
    #9
  10. weston

    weston Guest

    Makes sense. I'm convinced.

    Even though I still find the whole affair inconvenient. *sigh*
     
    weston, Oct 22, 2005
    #10
  11. weston wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> Because it's *Cascading* Style Sheets.

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


    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
     
    Thomas 'PointedEars' Lahn, Oct 22, 2005
    #11
  12. weston

    weston Guest

    RobG wrote:

    > 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&rnum=1&hl=en#f7a42159d764d522>


    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;
    }
     
    weston, Nov 8, 2005
    #12
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?R2xlbm4gVmVuemtl?=

    trouble retrieving data from ASPState Database

    =?Utf-8?B?R2xlbm4gVmVuemtl?=, Jul 29, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    2,152
    =?Utf-8?B?R2xlbm4gVmVuemtl?=
    Jul 30, 2004
  2. Starfox
    Replies:
    2
    Views:
    531
    Starfox
    Jul 25, 2005
  3. Chris Shipley

    Trouble retrieving value with request.form

    Chris Shipley, Jan 12, 2004, in forum: ASP General
    Replies:
    1
    Views:
    181
    Aaron Bertrand [MVP]
    Jan 12, 2004
  4. Julie Siebel
    Replies:
    4
    Views:
    156
    Dr John Stockton
    Feb 25, 2004
  5. Mark
    Replies:
    2
    Views:
    139
Loading...

Share This Page