10

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

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

我将如何在 YUI 中执行此操作？我目前使用的是2.8.1 版本。

与这个问题类似，我总是可以对高度、边框、填充和边距执行getComputedStyle()，但这是很多体力劳动，包括解析返回值和获取所需的正确值并自己进行数学运算。

在 YUI 中是否有一些与 jQuery 等效的功能可以outerHeight()为我完成所有这些工作？

解决方案

我最终编写了自己的解决方案，因为我找不到 jQueryouterheight()等价物。我已在此处发布解决方案作为答案。

4

4 回答 4

5

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

于 2012-10-01T21:26:25.350 回答
2

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

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

于 2012-10-01T20:59:57.417 回答
1

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

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

于 2012-10-01T20:56:25.763 回答
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 中对其进行了测试。让我知道你们的想法！

于 2012-10-05T19:56:02.193 回答