what is the jQuery outerHeight() equivalent in YUI

Question

In jQuery, I can very easily get the current computed height for an element that includes padding, border, and optionally margin by using outerHeight()...

// returns height of element + border + padding + margin
$('.my-element').outerHeight(true);

How would I do this in YUI? I'm currently using version 2.8.1.

Similar to this question, I can always do getComputedStyle() for height, border, padding, and margin, but that is a lot of manual labor which includes parsing the return values and grabbing the correct values that are needed and doing the math myself.

Isn't there some equivalent function to jQuery's outerHeight() in YUI that does all of this for me?

Solution

I ended up writing my own solution since I couldn't find a jQuery outerheight() equivalent. I've posted the solution as an answer here.

I believe `offsetHeight` does not include the margin values, which are important to me — Hristo, Oct 01 '12 at 20:39
http://stackoverflow.com/questions/3039828/how-to-get-calculated-element-width-and-height-in-yui3 — vol7ron, Oct 01 '12 at 20:55
just a heads up, if your margin is in %, the outerHeight value in safari is incorrect for jquery — Huangism, Oct 01 '12 at 21:00
thanks for the heads up. it should always be in pixels, but i'll make sure — Hristo, Oct 01 '12 at 21:01

score 5 · Answer 1 · answered Oct 01 '12 at 21:26

There is no built-in way of getting the outer width of an element with its margin in YUI. Like @jshirley mentions, there is offsetWidth, but it doesn't take margins into account. You can however create a function that adds the margin very easily:

Y.Node.ATTRS.outerHeight = {
  getter: function () {
    return this.get('offsetHeight') + 
           parseFloat(this.getComputedStyle('marginTop')) + 
           parseFloat(this.getComputedStyle('marginBottom'));
  }
};

Y.Node.ATTRS.outerWidth = {
  getter: function () {
    return this.get('offsetWidth') +
           parseFloat(this.getComputedStyle('marginLeft')) +
           parseFloat(this.getComputedStyle('marginRight'));
  }
};

Then you can get the outer width by doing Y.one(selector).get('outerWidth'). Here's an example based on @jshirley's code: http://jsbin.com/aretab/4/.

Just keep in mind that dimensions are usually a source of bugs in browsers and this doesn't take into account some stuff (ie: dimensions of the document) jQuery tries to catch (see https://github.com/jquery/jquery/blob/master/src/dimensions.js).

I just noticed he said he was using YUI 2. The above solution is a very good one, however is for YUI 3. There are no real valid reasons for using YUI 2 in this day and age. — jshirley, Oct 02 '12 at 00:03
no real valid reasons? if I had it my way, I'd be using jQuery, but I can't... reasons above my pay grade ;) — Hristo, Oct 05 '12 at 19:51

score 2 · Answer 2 · answered Oct 01 '12 at 20:59

2

If you wanted to avoid the manual labor, wrap the element in a div and get the computed style of that.

If it's something you're doing more than once, create a function/plugin to reuse.

answered Oct 01 '12 at 20:59

vol7ron

40,809
21
119
172

score 1 · Answer 3 · answered Oct 01 '12 at 20:56

1

According to http://www.jsrosettastone.com/, you should be using .get('offsetHeight').

This example shows the equivalency: http://jsbin.com/aretab/1/edit

answered Oct 01 '12 at 20:56

jshirley

264
1
4

1

this does not work. this does not include the `margin` of the element. – Hristo Oct 01 '12 at 20:57
1

I'm using `outerHeight(true)`... passing in `true` tells jQuery to use margin in its calculation – Hristo Oct 01 '12 at 20:59

Hristo · Accepted Answer · 2012-10-10T20:23:57.927

I ended up writing my own little utility function for this:

/**
 * Calculates the outer height for the given DOM element, including the 
 * contributions of padding, border, and margin.
 * 
 * @param el - the element of which to calculate the outer height
 */
function calculateElementOuterHeight(el) {

  var height = 0;
  var attributeHeight = 0;
  var attributes = [
      'height', 
      'border-top-width', 
      'border-bottom-width', 
      'padding-top', 
      'padding-bottom', 
      'margin-top', 
      'margin-bottom'
  ];

  for (var i = 0; i < attributes.length; i++) {

    // for most browsers, getStyle() will get us a value for the attribute 
    // that is parse-able into a number
    attributeHeight = parseInt(YAHOO.util.Dom.getStyle(el, attributes[i]), 10);

    // if the browser returns something that is not parse-able, like "auto", 
    // try getComputedStyle(); should get us what we need
    if (isNaN(attributeHeight)) {
      attributeHeight = parseInt(YAHOO.util.Dom.getComputedStyle(el, attributes[i]), 10);
    }

    // if we have an actual numeric value now, add it to the height, 
    // otherwise ignore it
    if (!isNaN(attributeHeight)) {
      height += attributeHeight;
    }
  }

  return isNaN(height) ? 0 : height;
}

This seems to work across all modern browsers. I've tested it in Chrome, Firefox (idk about 3.6, but the latest version works), Safari, Opera, & IE 7,8,9. Let me know what you guys think!

what is the jQuery outerHeight() equivalent in YUI

Solution

4 Answers4

Linked