Error reading element styles when set in stylesheet - is this abrowser bug?

Discussion in 'Javascript' started by Ciaran, Aug 23, 2010.

  1. Ciaran

    Ciaran Guest

    Consider this:
    <html>
    <head>
    <style type="text/css">
    p.ex1 {margin-left:50px;}
    </style>
    </head>
    <body onload="
    alert(document.getElementById('ex1').style.marginLeft);
    alert(document.getElementById('ex2').style.marginLeft); ">

    <p class="ex1" id='ex1'>A paragraph with a 20px left margin.</p>
    <p id='ex2' style='margin-left:20px;'>A paragraph with a 20px left
    margin.</p>

    </body>
    </html>

    Why is the first alert empty and how can I fix it without adding the
    style inline?

    Thanks,
    Ciarán
     
    Ciaran, Aug 23, 2010
    #1
    1. Advertising

  2. Ciaran

    David Mark Guest

    On Aug 22, 10:39 pm, Ciaran <> wrote:
    > Consider this:
    > <html>
    > <head>
    > <style type="text/css">
    > p.ex1 {margin-left:50px;}
    > </style>
    > </head>
    > <body onload="
    > alert(document.getElementById('ex1').style.marginLeft);
    > alert(document.getElementById('ex2').style.marginLeft);  ">
    >
    > <p class="ex1" id='ex1'>A paragraph with a 20px left margin.</p>
    > <p id='ex2' style='margin-left:20px;'>A paragraph with a 20px left
    > margin.</p>
    >
    > </body>
    > </html>
    >
    > Why is the first alert empty and how can I fix it without adding the
    > style inline?
    >


    It's empty because there is no inline style set for that element.

    Google for getComputedStyle (standard) and currentStyle (IE < 9 pseudo-
    equivalent). That method and property can be used to retrieve the
    value you are after (but only by coincidence as you used pixel units).

    Alternatively, assuming the rules are not declared as !important, you
    could set the inline margin-left style to "0px" and see how much the
    offsetLeft property changes.
     
    David Mark, Aug 23, 2010
    #2
    1. Advertising

  3. Ciaran

    Ciaran Guest

    On 23 Aug, 04:31, David Mark <> wrote:
    > On Aug 22, 10:39 pm, Ciaran <> wrote:
    >
    >
    >
    >
    >
    > > Consider this:
    > > <html>
    > > <head>
    > > <style type="text/css">
    > > p.ex1 {margin-left:50px;}
    > > </style>
    > > </head>
    > > <body onload="
    > > alert(document.getElementById('ex1').style.marginLeft);
    > > alert(document.getElementById('ex2').style.marginLeft);  ">

    >
    > > <p class="ex1" id='ex1'>A paragraph with a 20px left margin.</p>
    > > <p id='ex2' style='margin-left:20px;'>A paragraph with a 20px left
    > > margin.</p>

    >
    > > </body>
    > > </html>

    >
    > > Why is the first alert empty and how can I fix it without adding the
    > > style inline?

    >
    > It's empty because there is no inline style set for that element.
    >
    > Google for getComputedStyle (standard) and currentStyle (IE < 9 pseudo-
    > equivalent).  That method and property can be used to retrieve the
    > value you are after (but only by coincidence as you used pixel units).
    >
    > Alternatively, assuming the rules are not declared as !important, you
    > could set the inline margin-left style to "0px" and see how much the
    > offsetLeft property changes.




    Hey Thanks a lot David, this worked like a charm:
    window.getComputedStyle(document.getElementById('ex1'),null).getPropertyValue("margin-
    left")
    Ciarán
     
    Ciaran, Aug 23, 2010
    #3
  4. Ciaran

    Ry Nohryb Guest

    On Aug 23, 3:21 pm, Ciaran <> wrote:
    > (...)
    > window.getComputedStyle(document.getElementById('ex1'),null).getPropertyVal ue("margin-
    > left")


    And you can drop the window. in there, because the properties of the
    window object are global:

    getComputedStyle(document.getElementById('ex1'),null).getPropertyValue("margin-
    left")
    --
    Jorge.
     
    Ry Nohryb, Aug 24, 2010
    #4
    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. sasquatch
    Replies:
    0
    Views:
    443
    sasquatch
    Nov 20, 2005
  2. sasquatch
    Replies:
    7
    Views:
    14,380
    Juan T. Llibre
    Nov 21, 2005
  3. Sally Thompson
    Replies:
    3
    Views:
    482
    Barry Pearson
    Mar 5, 2004
  4. =?ISO-8859-1?Q?J=F8rn_Tommy_Kinder=E5s?=

    Stylesheet referanse i stylesheet

    =?ISO-8859-1?Q?J=F8rn_Tommy_Kinder=E5s?=, Jul 3, 2004, in forum: XML
    Replies:
    3
    Views:
    578
    =?ISO-8859-1?Q?J=F8rn_Tommy_Kinder=E5s?=
    Jul 4, 2004
  5. =?Utf-8?B?QWxleCBNYWdoZW4=?=

    Styles without Http Request for StyleSheet

    =?Utf-8?B?QWxleCBNYWdoZW4=?=, Jan 1, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    274
    Walter Wang [MSFT]
    Jan 2, 2007
Loading...

Share This Page