YUI 中的 jQuery outerHeight() 等价物是什么答案

【问题标题】：what is the jQuery outerHeight() equivalent in YUIYUI 中的 jQuery outerHeight() 等价物是什么
【发布时间】：2012-09-22 17:41:02
【问题描述】：

在 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。

【问题讨论】：

你试过.get("offsetHeight")吗？
我相信offsetHeight 不包括对我很重要的边距值
stackoverflow.com/questions/3039828/…
请注意，如果您的边距以 % 为单位，则 safari 中的 outerHeight 值对于 jquery 不正确
感谢您的提醒。它应该始终以像素为单位，但我会确保

标签： javascript jquery height yui

【解决方案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）。

【讨论】：

我刚刚注意到他说他正在使用 YUI 2。上面的解决方案是一个非常好的解决方案，但适用于 YUI 3。在这个时代使用 YUI 2 没有真正的正当理由。
没有真正的正当理由？如果我按照自己的方式去做，我会使用 jQuery，但我不能...原因高于我的工资等级；）

【解决方案2】：

如果您想避免手工劳动，请将元素包装在一个 div 中并获取它的计算样式。

如果您不止一次做某事，请创建一个函数/插件以重复使用。

【讨论】：

【解决方案3】：

根据http://www.jsrosettastone.com/，您应该使用.get('offsetHeight')。

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

【讨论】：

这不起作用。这不包括元素的margin。
我正在使用 outerHeight(true)... 传入 true 告诉 jQuery 在其计算中使用保证金

【解决方案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 和 IE 7、8、9 中对其进行了测试。让我知道你们的想法！

【讨论】：