SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Discrepancy between getComputedStyle and offsetHeight

    I have an unstyled div in an HTML document that contains varying amounts of text depending on the page. I need to determine the height of the div when a given page loads, but I'm getting two vastly different numbers in Firefox (with getComputedStyle) and IE (with offsetHeight).

    Here are the relevant excerpts from the Javascript:

    Firefox:

    Code:
    theHeight=document.defaultView.getComputedStyle(theDiv,null).getPropertyValue("height");
    Result = 241.533px;

    And now, IE:

    Code:
    theHeight=theDiv.offsetHeight;
    Result = 579

    Why are they not even in the same ballpark?

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    offsetHeight is not the IE equivilent of getComputedStyle, try the IE only currentStyle instead- or use offsetHeight for all browsers.

  3. #3
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. As far as I can tell, though, currentStyle only applies to elements that have been styled via a style sheet, inline style, or HTML attribute. Because I'm working with an unstyled DIV with a height that varies depending on the page, when I tried using currentStyle, the value I got was "auto".

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    theHeight=theDiv.offsetHeight will return the rendered height (as an integer) in most browsers- but if display is set to none, the offsetHeight will be 0.

  5. #5
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know, but as I stated in my initial post, it's giving me a number that's vastly different from the result I get with getComputedStyle. I understand (now, thanks to you) that offsetHeight is not the IE equivalent of getComputedStyle (for height), but... what is?

    I'm trying to avoid having to use a non-standard feature for all browsers. I can live with using a non-standard feature for IE since it doesn't support the standard in this case, but I need a reliable way to get the same value for height using the two methods. Or at least CLOSE to the same value.

    What am I missing? This really should be easy, and I'm feeling dumber by the moment.

  6. #6
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm good question, there is runtimeStyle as well in IE, but i'm not sure if it's possible without going through each rule in the element's style and calculating it manually?

    Also:

    offsetWidth and offsetHeight
    The dimensions of the element taken outside its border. (The width inside the padding in IE's quirks mode.)
    clientWidth and clientHeight
    The dimensions of the element taken inside its border, and minus any scrollbar size.
    scrollWidth and scrollHeight
    The dimensions the element would be using if it did not have a scrollbar and was not constrained in size (in other words, the dimensions of its contents, plus its padding). Only usable and reliable if the element actually has a scrollbar.
    scrollLeft and scrollTop
    The distance the element has been scrolled.

  7. #7
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The offsetHeight of an element is often different in different browsers,
    depending on style properties like padding, lineheight, and text and font values-
    even if you do not set them in a stylesheet, the browsers have their own default properties.

    If the element you are measuring itself contains elements, the differences are multiplied.


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
  •