Что эквивалентно эквиваленту jQuery outerHeight() в YUI

В jQuery я могу очень легко получить текущую вычисленную высоту для элемента, который включает в себя отступы, границы и необязательные поля, используя externalHeight()...

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

Как мне это сделать в YUI? В настоящее время я использую версию 2.8.1.

Подобно этому вопросу, я всегда могу сделать getComputedStyle() для высота, граница, отступы и маржа, но это большой ручной труд, который включает в себя анализ значений возвращаемых значений и захват правильных значений, которые необходимы, и выполнение самой математики.

Нет ли какой-либо эквивалентной функции jQuery outerHeight() в YUI, которая делает все это для меня?

Решение

В итоге я написал собственное решение, так как не смог найти эквивалент jQuery outerHeight(). Я разместил решение как ответ здесь.

Ответы

Ответ 1

В итоге я написал для себя свою небольшую полезную функцию:

/**
 * 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;
}

Это, похоже, работает во всех современных браузерах. Я тестировал его в Chrome, Firefox (idk около 3,6, но работает последняя версия), Safari, Opera и IE 7,8,9. Дайте мне знать, что вы, ребята, думаете!

Ответ 2

Нет встроенного способа получить внешнюю ширину элемента с его разницей в YUI. Как упоминает @jshirley, есть offsetWidth, но он не учитывает поля. Тем не менее вы можете создать функцию, которая добавляет маржу очень легко:

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'));
  }
};

Затем вы можете получить внешнюю ширину, выполнив Y.one(selector).get('outerWidth'). Вот пример, основанный на коде @jshirley: http://jsbin.com/aretab/4/.

Просто имейте в виду, что размеры обычно являются источником ошибок в браузерах, и это не учитывает некоторые вещи (то есть: размеры документа) jQuery пытается поймать (см. https://github.com/jquery/jquery/blob/master/src/dimensions.js).

Ответ 3

Если вы хотите избежать ручного труда, оберните элемент в div и получите вычисленный стиль.

Если это то, что вы делаете больше одного раза, создайте функцию/плагин для повторного использования.