SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Javascript Retrieving CSS Settings

    I'm having problems retrieving the position of an absolute positioned image using the DOM.

    A cut-down version of my code is below including an alert to display the current left position of the image. However xpos appears to be null.

    Can anyone suggest what I'm doing wrong?
    Code:
    <html>
      <head>
        <style type="text/css">
          #theicon{
            position: absolute;
            top: 250px;
            left: 250px;
            width: 31px;
            visibility: visible;
          }
        </style>
        <script language="javascript">
        <!--
          function display_left(but){
            var xpos=document.getElementById('theicon').style.left;
            window.alert("~" + xpos + "~");				
          }
        //-->
        </script>
      </head>
      <body>
        <a id="moveleft" href="javascript://" onMouseOver="display_left(this.id)">Left</a><br>
        <img src="stop.gif" id="theicon">
      </body>
    </html>
    Thanks,

    Andy
    From the English nation to a US location.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Use this code:
    Code:
    <html>
      <head>
        <style type="text/css">
          #theicon{
            position: absolute;
            top: 250px;
            left: 250px;
            width: 31px;
    				height: 100px;
            visibility: visible;
          }
        </style>
        <script language="javascript">
        <!--
          function displayLeft(){
            var xpos=document.getElementById('theicon').currentStyle.left;
            window.alert("~" + xpos + "~");				
          }
        //-->
        </script>
      </head>
      <body>
        <a id="moveleft" href="#" onMouseOver="displayLeft();">Left</a><br>
        <img src="stop.gif" id="theicon">
      </body>
    </html>
    Note my use of "currentStyle" instead of "style". "style" only gets specified inline styles (as in <img style="position:absolute; width: 50px;" />), while "currentStyle" gets styles specified in the document's <head> or in external CSS files.

  3. #3
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one! Thanks for that.
    Works fine now.

    Sorry for not responding sooner.


    Andy
    From the English nation to a US location.

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    No problem; glad to be of service!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •