document.getElementById newbie question

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Randall
    #1

    document.getElementById newbie question

    I am a newbie trying to learn the DOM. Can someone tell me why the
    first alert statement returns null, and the second returns the value
    33px (which was set using the style="top:33px ;" in the DIV tag).

    Why doesn't the first alert statement pick up the style.left attribute
    from the CSS?

    <html>
    <head>
    <style type="text/css">
    <!--
    DIV.test {position:absol ute; left:10px; top:10px; width:100; height:
    100;}
    -->
    </style>
    </head>
    <body>
    <div id="Canvas" class="test" style="top:33px ;">canvas</div>
    <script type="text/javascript">
    var el=document.get ElementById("Ca nvas");
    alert(el.style. left); //returns null... Why not 10px ???
    alert(el.style. top); //returns 33px
    </script>

    </body>

    </html>
    Tags: None
    • Jukka K. Korpela
      #2
      Re: document.getEle mentById newbie question

      Scripsit Randall:
      I am a newbie trying to learn the DOM.
      We can see that from your posting a CSS and JavaScript question to an
      HTML newsgroup.

      Read a book, then a nice FAQ list, and when you ultimately decide to
      post a meaningful question, choose the right group and don't forget to
      include a URL.

      --
      Jukka K. Korpela ("Yucca")
      http://www.cs.tut.fi/~jkorpela/


        Comment

        • Ben C
          #3
          Re: document.getEle mentById newbie question

          On 2008-05-09, Randall <weber.randy@gm ail.comwrote:
          I am a newbie trying to learn the DOM. Can someone tell me why the
          first alert statement returns null, and the second returns the value
          33px (which was set using the style="top:33px ;" in the DIV tag).
          >
          Why doesn't the first alert statement pick up the style.left attribute
          from the CSS?
          el.style just gives you the value of the style attribute, which in this
          case is "top:33px", no more and no less.

          The total set of an element's computed styles come from all over the
          place: stylesheets, style elements, and the style attribute.

          el gets its value for left from the selector in the STYLE element, not
          from its style attribute. So left doesn't appear in el.style.

          What you might want is window.getCompu tedStyle which gives you access to
          the complete set of computed styles regardless of where they came from.
          ><html>
          ><head>
          ><style type="text/css">
          ><!--
          DIV.test {position:absol ute; left:10px; top:10px; width:100; height:
          100;}
          -->
          ></style>
          ></head>
          ><body>
          ><div id="Canvas" class="test" style="top:33px ;">canvas</div>
          ><script type="text/javascript">
          var el=document.get ElementById("Ca nvas");
          alert(el.style. left); //returns null... Why not 10px ???
          alert(el.style. top); //returns 33px
          ></script>
          >
          ></body>
          >
          ></html>

            Comment

            • Jonathan N. Little
              #4
              Re: document.getEle mentById newbie question

              Randall wrote:

              BTW in addition to Ben's remarks your STYLE has some problems...
              <html>
              <head>
              <style type="text/css">
              <!--
              ^^^^
              This is style content, no HTML comments here, You don't need to hide it
              from old browsers, nobody is using Netscape 3 or IE 3
              DIV.test {position:absol ute; left:10px; top:10px; width:100; height:
              ^^^^
              100 what? No units where they are required for non-zero lengths
              100;}
              ^^^^
              Same here.
              -->
              </style>


              --
              Take care,

              Jonathan
              -------------------
              LITTLE WORKS STUDIO
              Little Works Studio Site Maintainance
              http://www.LittleWorksStudio.com

                Comment

                • Jukka K. Korpela
                  #5
                  Re: document.getEle mentById newbie question

                  Scripsit Jonathan N. Little:
                  ><style type="text/css">
                  ><!--
                  ^^^^
                  This is style content, no HTML comments here, You don't need to hide
                  it from old browsers, nobody is using Netscape 3 or IE 3
                  To be exact, IE 3 recognized <stylemarkup, so the hack was not needed
                  for it. (The CSS support in IE 3 was awful, but that's a different
                  issue.) Netscape 3 didn't, but as far as I know, the newest records of
                  anyone using Netscape 3 for real are from 2005.

                  --
                  Jukka K. Korpela ("Yucca")
                  http://www.cs.tut.fi/~jkorpela/


                    Comment

                    • Jonathan N. Little
                      #6
                      Re: document.getEle mentById newbie question

                      Jukka K. Korpela wrote:
                      Scripsit Jonathan N. Little:
                      >
                      >><style type="text/css">
                      >><!--
                      > ^^^^
                      >This is style content, no HTML comments here, You don't need to hide
                      >it from old browsers, nobody is using Netscape 3 or IE 3
                      >
                      To be exact, IE 3 recognized <stylemarkup, so the hack was not needed
                      for it.
                      Not the copy that I have, but it doesn't need the html comments to hide
                      the style block contents...
                      (The CSS support in IE 3 was awful, but that's a different
                      issue.) Netscape 3 didn't, but as far as I know, the newest records of
                      anyone using Netscape 3 for real are from 2005.
                      >
                      That person should get out more!

                      --
                      Take care,

                      Jonathan
                      -------------------
                      LITTLE WORKS STUDIO
                      Little Works Studio Site Maintainance
                      http://www.LittleWorksStudio.com

                        Comment

                        Previous template Next
                        Working...