Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getting the actual width and height of a span

    Hello

    I have defined a span object and gave it an id.
    The span contains nested tags which define its content.

    Is there a way of know what are the precise dimensions of the span in pixels?
    I would like to know what are the width & height that the span will occupy once it will be display on the screen.

    I tried the following:
    Code:
    var spanObj = document.getElementByID('mySpan');
    var width = spanObj.style.width;
    var height = spanObj.style.height;
    That however gives me the width and height values that I have set when the span was defined. If the dimensions of the span become different once it is displayed, then I don't know what the new dimensions are.

    I even tried:
    Code:
    var spanObj = document.getElementByID('mySpan');
    var width = spanObj.runtimeStyle.width;
    var height = spanObj.runtimeStyle.height;
    thansk in advance

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Did you try offsetHeight & offsetWidth?

    Code:
    <span onmouseover="alert('innerWidth= '+this.offsetWidth+'\ninnerHeight= '+this.offsetHeight)">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
    .....Willy

  • #3
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    currentStyle.width

  • #4
    New Coder
    Join Date
    Mar 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    offsetWidth & offsetHeight worked perfectly
    thanks

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    currentStyle method is not recognized by Mozilla...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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