什么是YUI中的jQuery outerHeight（）等价物 [英] what is the jQuery outerHeight() equivalent in YUI

问题描述

在jQuery中，我可以通过使用 outerHeight（） ...

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

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

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

类似于这个问题，我总是可以做 getComputedStyle（）用于高度，边框，填充和边距，但这是大量的手工劳动，包括解析返回值并获取所需的正确值并进行数学运算我自己。

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.

在YUI中，jQuery的 outerHeight（）是否有一些等效函数可以完成所有这些操作我？

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

我最终编写了自己的解决方案，因为我找不到jQuery outerheight（）等价物。我已将该解决方案发布为此处的答案。

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

这似乎适用于所有现代浏览器。我在Chrome，Firefox（idk大约3.6，但最新版本有效），Safari，Opera和& ;; IE 7,8,9。让我知道你们的想法！

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!

这篇关于什么是YUI中的jQuery outerHeight（）等价物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！