jQuery: получить высоту скрытого элемента в jQuery.

Question

Мне нужно получить высоту скрытого элемента внутри div. Прямо сейчас я показываю div, получаю высоту и скрываю родительский div. Это кажется немного глупым. Есть ли лучший способ?

Я использую jQuery 1.4.2:

$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();

Answer 1

В моих обстоятельствах у меня также был скрытый элемент, мешавший мне получить значение высоты, но это был не сам элемент, а один из его родителей ... поэтому я просто поставил чек на один из моих плагинов, чтобы посмотрите, не скрыт ли он, иначе найдите ближайший скрытый элемент. Вот пример:

var $content = $('.content'),
    contentHeight = $content.height(),
    contentWidth = $content.width(),
    $closestHidden,
    styleAttrValue,
    limit = 20; //failsafe

if (!contentHeight) {
    $closestHidden = $content;
    //if the main element itself isn't hidden then roll through the parents
    if ($closestHidden.css('display') !== 'none') { 
        while ($closestHidden.css('display') !== 'none' && $closestHidden.size() && limit) {
            $closestHidden = $closestHidden.parent().closest(':hidden');
            limit--;
        }
    }
    styleAttrValue = $closestHidden.attr('style');
    $closestHidden.css({
        position:   'absolute',
        visibility: 'hidden',
        display:    'block'
    });
    contentHeight = $content.height();
    contentWidth = $content.width();

    if (styleAttrValue) {
        $closestHidden.attr('style',styleAttrValue);
    } else {
        $closestHidden.removeAttr('style');
    }
}

На самом деле, это объединение ответов Ника, Грегори и Век, дающих вам возможность использовать улучшенный метод Грегори, но использует оба метода на случай, если в атрибуте стиля должно быть что-то, что вы хотите вернуть, и ищет родительский элемент.

Моя единственная проблема с моим решением - то, что петля через родителей не совсем эффективна.

Answer 2

По определению элемент имеет высоту, только если он видим.

Просто любопытно: зачем вам высота скрытого элемента?

Одна альтернатива - эффективно скрыть элемент, поместив его (используя z-index) наложение некоторого вида).

Answer 3

Если вы уже отображали элемент на странице ранее, вы можете просто взять высоту непосредственно из элемента DOM (достижимый в jQuery с помощью .get (0)), поскольку он устанавливается даже тогда, когда элемент скрыт:

$('.hidden-element').get(0).height;

то же самое для ширины:

$('.hidden-element').get(0).width;

(спасибо Skeets O'Reilly за исправление)

Answer 4

Вот скрипт, который я написал для обработки всех методов измерения jQuery для скрытых элементов, даже потомков скрытых родителей. Обратите внимание, что, конечно, при использовании этой функции наблюдается снижение производительности.

// Correctly calculate dimensions of hidden elements
(function($) {
    var originals = {},
        keys = [
            'width',
            'height',
            'innerWidth',
            'innerHeight',
            'outerWidth',
            'outerHeight',
            'offset',
            'scrollTop',
            'scrollLeft'
        ],
        isVisible = function(el) {
            el = $(el);
            el.data('hidden', []);

            var visible = true,
                parents = el.parents(),
                hiddenData = el.data('hidden');

            if(!el.is(':visible')) {
                visible = false;
                hiddenData[hiddenData.length] = el;
            }

            parents.each(function(i, parent) {
                parent = $(parent);
                if(!parent.is(':visible')) {
                    visible = false;
                    hiddenData[hiddenData.length] = parent;
                }
            });
            return visible;
        };

    $.each(keys, function(i, dimension) {
        originals[dimension] = $.fn[dimension];

        $.fn[dimension] = function(size) {
            var el = $(this[0]);

            if(
                (
                    size !== undefined &&
                    !(
                        (dimension == 'outerHeight' || 
                            dimension == 'outerWidth') &&
                        (size === true || size === false)
                    )
                ) ||
                isVisible(el)
            ) {
                return originals[dimension].call(this, size);
            }

            var hiddenData = el.data('hidden'),
                topHidden = hiddenData[hiddenData.length - 1],
                topHiddenClone = topHidden.clone(true),
                topHiddenDescendants = topHidden.find('*').andSelf(),
                topHiddenCloneDescendants = topHiddenClone.find('*').andSelf(),
                elIndex = topHiddenDescendants.index(el[0]),
                clone = topHiddenCloneDescendants[elIndex],
                ret;

            $.each(hiddenData, function(i, hidden) {
                var index = topHiddenDescendants.index(hidden);
                $(topHiddenCloneDescendants[index]).show();
            });
            topHidden.before(topHiddenClone);

            if(dimension == 'outerHeight' || dimension == 'outerWidth') {
                ret = $(clone)[dimension](size ? true : false);
            } else {
                ret = $(clone)[dimension]();
            }

            topHiddenClone.remove();
            return ret;
        };
    });
})(jQuery);