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 6 of 6

Thread: Height

  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Height

    Hi, i am trying to find the width of characters in an element like so but it's coming up blank
    Code:
    <head>
    <script>
    function check(){
    var val=document.getElementById('mydiv').style.width;
    alert(val);
    }
    </script>
    </head>
    
    <body onload="check()">
    <div id="mydiv">I am a div</div>
    </body>
    I know that if i add style="width:100%" to the div then the function would return 100% but say i wanted to find how much width the above paragraph actually took up (ie looks about 40px), is this possible
    Last edited by scott100; 05-30-2006 at 01:58 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    If you don't set the size expicitly on a block level element
    it will take up as much space as there is in the window.
    But you'll only get a property for style.width if you set the style width inline.

    This code will give you the size of the element passed as an argument-
    It returns an array of two integers- [width,height];

    Code:
    function elSize(hoo){ 
        return Math.max(hoo.scrollWidth,hoo.offsetWidth),
        Math.max(hoo.scrollHeight,hoo.offsetHeight)];
        }

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That would give you the width of the element, not how much room the characters took up.

    I managed to figure it out without setting the width inline

    document.defaultView.getComputedStyle(docObj, "").getPropertyValue(property)
    Last edited by scott100; 05-30-2006 at 11:37 AM.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Interesting. Where did you find that?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mr know it all... Google

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    one of my standard functions
    Code:
    function zxcGetStyle(zxcel,zxcs){
     if (zxcel.currentStyle){ return zxcel.currentStyle[zxcs]; }
     if (window.getComputedStyle){ return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcs); }
     return false;
    }
    modified from QirksMode
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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