10

jQuery では、 outerHeight()を使用して、パディング、ボーダー、およびオプションでマージンを含む要素の現在の計算された高さを非常に簡単に取得できます...

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

YUIでこれを行うにはどうすればよいですか? 現在、バージョン 2.8.1を使用しています。

この質問と同様に、高さ、境界線、パディング、およびマージンに対してgetComputedStyle()をいつでも実行できますが、それは戻り値の解析、必要な正しい値の取得、自分での計算など、多くの手作業です。

outerHeight()私のためにこれをすべて行うYUIのjQueryと同等の機能はありませんか?

解決

outerheight()jQueryに相当するものが見つからなかったため、独自のソリューションを作成することになりました。ここに回答としてソリューションを投稿しました。

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 (約 3.6 ですが、最新バージョンは動作します)、Safari、Opera、および IE 7、8、9 でテストしました。皆さんの考えを教えてください！

于 2012-10-05T19:56:02.193 に答える