get height of DIV

Discussion in 'Javascript' started by samuelberthelot@googlemail.com, Jul 5, 2006.

  1. Guest

    Hi,
    To get the height of my DIV, I do :

    myDivElement.style.height, which returns "176px". I don't want that. I
    want to get 176. How could I do that, which property should I use? (I
    could do a string parsing, but what a pain....)

    Thanks
    , Jul 5, 2006
    #1
    1. Advertising

  2. web.dev Guest

    wrote:
    > Hi,
    > To get the height of my DIV, I do :
    >
    > myDivElement.style.height, which returns "176px". I don't want that. I
    > want to get 176. How could I do that, which property should I use? (I
    > could do a string parsing, but what a pain....)
    >
    > Thanks


    There is no property which would return you just the number, you will
    have to do string parsing. One way of doing this could be the
    following:

    //assuming you have your element

    var height = myDiv.style.height;
    height = height.split("px")[0];
    web.dev, Jul 5, 2006
    #2
    1. Advertising

  3. Guest

    Thanks for the reply. I thought I could avoid having to do that... ok
    then.
    web.dev wrote:

    > wrote:
    > > Hi,
    > > To get the height of my DIV, I do :
    > >
    > > myDivElement.style.height, which returns "176px". I don't want that. I
    > > want to get 176. How could I do that, which property should I use? (I
    > > could do a string parsing, but what a pain....)
    > >
    > > Thanks

    >
    > There is no property which would return you just the number, you will
    > have to do string parsing. One way of doing this could be the
    > following:
    >
    > //assuming you have your element
    >
    > var height = myDiv.style.height;
    > height = height.split("px")[0];
    , Jul 5, 2006
    #3
  4. Randy Webb Guest

    said the following on 7/5/2006 12:31 PM:
    > Thanks for the reply. I thought I could avoid having to do that... ok
    > then.


    valueWithoutPX = parseInt(valueWithPX,10);

    P.S. This is in the FAQ.

    Answer:It destroys the order of the conversation
    Question: Why?
    Answer: Top-Posting.
    Question: Whats the most annoying thing on Usenet?

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jul 5, 2006
    #4
  5. Dustin Guest

    Use the offsetWidth and offsetHeight properties. They are properties
    of the element, not the elements style node.

    var theDiv = document.getElementById("theDiv");
    var width = theDiv.offsetWidth;
    var height = theDiv.offsetHeight;

    That works in IE6 and Firefox. I haven't tested it in other browsers.
    Dustin, Jul 5, 2006
    #5
  6. Matt Kruse Guest

    Dustin wrote:
    > Use the offsetWidth and offsetHeight properties. They are properties
    > of the element, not the elements style node.
    > var theDiv = document.getElementById("theDiv");
    > var width = theDiv.offsetWidth;
    > var height = theDiv.offsetHeight;


    This may not always work as expected, however.

    offset* properties are always the outer dimensions - including padding and
    borders.
    However, in a page running in "strict mode" in IE or in standards-compliant
    browsers, the specified style height of 176px does _not_ include padding and
    borders. So the style height and the offsetHeight may actually be different,
    and you need to use the one you actually want.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
    Matt Kruse, Jul 5, 2006
    #6
  7. Guest

    Thanks but it doesn't seem to work with FF :(
    Randy Webb wrote:
    > said the following on 7/5/2006 12:31 PM:
    > > Thanks for the reply. I thought I could avoid having to do that... ok
    > > then.

    >
    > valueWithoutPX = parseInt(valueWithPX,10);
    >
    > P.S. This is in the FAQ.
    >
    > Answer:It destroys the order of the conversation
    > Question: Why?
    > Answer: Top-Posting.
    > Question: Whats the most annoying thing on Usenet?
    >
    > --
    > Randy
    > comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    > Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    > Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    , Jul 6, 2006
    #7
  8. Matt Kruse Guest

    wrote:
    > Thanks but it doesn't seem to work with FF :(


    The phrase "doesn't work" is meaningless.
    See http://www.javascripttoolbox.com/clj/#getanswers

    3. Give an accurate error message or description of what failed. Never use
    the words "doesn't work". Saying that something "doesn't work" gives no
    information about what was supposed to happen and specifically what happened
    instead. Give more detail.

    parseInt("150px",10)

    will most certainly return 150 in FF, for example.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
    Matt Kruse, Jul 6, 2006
    #8
  9. Guest

    Sorry I was being lazy in the description of the error...
    indeed it returns 150 so I had to convert it to a string and add 'px'.
    All works fine now
    thank you
    Matt Kruse wrote:
    > wrote:
    > > Thanks but it doesn't seem to work with FF :(

    >
    > The phrase "doesn't work" is meaningless.
    > See http://www.javascripttoolbox.com/clj/#getanswers
    >
    > 3. Give an accurate error message or description of what failed. Never use
    > the words "doesn't work". Saying that something "doesn't work" gives no
    > information about what was supposed to happen and specifically what happened
    > instead. Give more detail.
    >
    > parseInt("150px",10)
    >
    > will most certainly return 150 in FF, for example.
    >
    > --
    > Matt Kruse
    > http://www.JavascriptToolbox.com
    > http://www.AjaxToolbox.com
    , Jul 6, 2006
    #9
    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. Replies:
    0
    Views:
    543
  2. HJ
    Replies:
    5
    Views:
    833
    Jonathan N. Little
    Sep 1, 2006
  3. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    853
    muggslab
    Feb 1, 2010
  4. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    133
    Dietmar Meier
    Jan 31, 2005
  5. Replies:
    0
    Views:
    113
Loading...

Share This Page