Question

在jQuery中，我可以通过使用outerHeight()来轻松获取包含填充，边框和可选边距的元素的当前计算高度...

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

我如何在YUI中这样做？我目前正在使用版本2.8.1 。

与this question类似，我总是可以getComputedStyle()执行高度，边框，填充和边距，但这需要大量的手工劳动，包括解析返回值并获取正确的值我需要自己做数学。

在YUI中，jQuery的outerHeight()是否有一些与我完全相同的功能？

解决方案

我最终编写了自己的解决方案，因为我找不到jQuery outerheight()等价物。我已将解决方案发布为an answer here。

Answer 1

没有内置的方法来获取元素的外部宽度，其边距在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）。

Answer 2

如果你想避免手工劳动，请将元素包装在div中并获得计算出的样式。

如果您正在做多次，请创建一个函数/插件以便重复使用。

Answer 3

根据http://www.jsrosettastone.com/，你应该使用.get（'offsetHeight'）。

此示例显示了等效性：http://jsbin.com/aretab/1/edit

Answer 4

我最终为此编写了自己的小实用功能：

/**
 * 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和＆amp ;; IE 7,8,9。让我知道你们的想法！

什么是YUI中的jQuery outerHeight（）等价物

解决方案

4 个答案: