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

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

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

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

Вы можете сделать что-то вроде этого, хотя и немного странно, забудьте, positionесли оно уже абсолютное:

var previousCss  = $("#myDiv").attr("style");

$("#myDiv").css({
    position:   'absolute', // Optional if #myDiv is already absolute
    visibility: 'hidden',
    display:    'block'
});

optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");

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

$('#some-element').height();

использование

$('#some-element').actual('height');

даст вам правильное значение для скрытого элемента или элемент имеет скрытого родителя.

Полную документацию смотрите здесь . На странице также есть демо-версия.

Надеюсь это поможет :)

Вы confuising двух стилей CSS, в стиль отображения и стиль видимости .

Если элемент скрыт путем установки стиля css видимости, тогда вы сможете получить высоту независимо от того, является ли элемент видимым или нет, так как элемент все еще занимает место на странице .

Если элемент скрыт путем изменения стиля отображения css на «none», тогда элемент не занимает место на странице, и вам придется назначить ему стиль отображения, который заставит элемент отображаться в некотором пространстве, в в какой точке вы можете получить высоту.

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

// try to grab the height of the elem
if (this.element.height() > 0) {
    var scroller_height = this.element.height();
    var scroller_width = this.element.width();

// if height is zero, then we're dealing with a hidden element
} else {
    var copied_elem = this.element.clone()
                      .attr("id", false)
                      .css({visibility:"hidden", display:"block", 
                               position:"absolute"});
    $("body").append(copied_elem);
    var scroller_height = copied_elem.height();
    var scroller_width = copied_elem.width();
    copied_elem.remove();
}

Это работает по большей части, но есть очевидная проблема, которая может возникнуть. Если контент, который вы клонируете, стилизован с помощью CSS, который включает в свои правила ссылки на родительскую разметку, клонированный контент не будет содержать соответствующий стиль и, вероятно, будет иметь несколько иные измерения. Чтобы обойти это, вы можете убедиться, что к разметке, которую вы клонируете, применяются правила CSS, которые не включают ссылки на родительскую разметку.

Кроме того, это не подошло для меня с моим виджетом скроллера, но чтобы получить соответствующую высоту клонированного элемента, вам нужно установить ширину равной ширине родительского элемента. В моем случае ширина CSS всегда применялась к реальному элементу, поэтому мне не пришлось об этом беспокоиться, однако, если к элементу не применена ширина, вам может потребоваться выполнить какую-то рекурсивную процедуру. Обход DOM-элемента элемента, чтобы найти соответствующую ширину родительского элемента.

Основываясь на ответе пользователя Ника и плагине hitautodestruct пользователя на JSBin, я создал аналогичный плагин jQuery, который получает ширину и высоту и возвращает объект, содержащий эти значения.

Это можно найти здесь: http://jsbin.com/ikogez/3/

Обновить

Я полностью переработал этот крошечный плагин, так как оказалось, что предыдущая версия (упомянутая выше) не была реально применима в реальной среде, где происходило много манипуляций с DOM.

Это работает отлично:

/**
 * getSize plugin
 * This plugin can be used to get the width and height from hidden elements in the DOM.
 * It can be used on a jQuery element and will retun an object containing the width
 * and height of that element.
 *
 * Discussed at StackOverflow:
 * http://stackoverflow.com/a/8839261/1146033
 *
 * @author Robin van Baalen <robin@neverwoods.com>
 * @version 1.1
 * 
 * CHANGELOG
 *  1.0 - Initial release
 *  1.1 - Completely revamped internal logic to be compatible with javascript-intense environments
 *
 * @return {object} The returned object is a native javascript object
 *                  (not jQuery, and therefore not chainable!!) that
 *                  contains the width and height of the given element.
 */
$.fn.getSize = function() {    
    var $wrap = $("<div />").appendTo($("body"));
    $wrap.css({
        "position":   "absolute !important",
        "visibility": "hidden !important",
        "display":    "block !important"
    });

    $clone = $(this).clone().appendTo($wrap);

    sizes = {
        "width": $clone.width(),
        "height": $clone.height()
    };

    $wrap.remove();

    return sizes;
};

Основываясь на ответе Ника:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").css({'position':'static','visibility':'visible', 'display':'none'});

Я обнаружил, что лучше сделать это:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").removeAttr('style');

Установка атрибутов CSS вставит их в строку, что перезапишет любые другие атрибуты, которые есть в вашем файле CSS. Удалив атрибут style в элементе HTML, все возвращается к нормальному состоянию и все еще скрыто, поскольку оно было спрятано в первую очередь.

Вы также можете расположить скрытый div с экрана с отрицательным полем, а не с помощью display: none, очень похоже на технику замены изображения с отступом текста.

например.

position:absolute;
left:  -2000px;
top: 0;

Таким образом, высота () все еще доступна.

Я пытаюсь найти работающую функцию для скрытого элемента, но я понимаю, что CSS намного сложнее, чем все думают. В CSS3 есть много новых методов верстки, которые могут не работать для всех предыдущих ответов, таких как гибкое поле, сетка, столбец или даже элемент внутри сложного родительского элемента.

пример flexibox

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

К сожалению, JavaScript не предоставляет какого-либо прямого события для уведомления, когда элемент показан или скрыт. Тем не менее, я создаю некоторую функцию на основе DOM Attribute Modified API, которая будет выполнять функцию обратного вызова при изменении видимости элемента.

$('[selector]').onVisibleChanged(function(e, isVisible)
{
    var realWidth = $('[selector]').width();
    var realHeight = $('[selector]').height();

    // render or adjust something
});

Для получения дополнительной информации, пожалуйста, посетите в моем проекте GitHub.

https://github.com/Soul-Master/visible.event.js

демо: http://jsbin.com/ETiGIre/7

Следуя решению Ника Крейвера, настройка видимости элемента позволяет получить точные размеры. Я использовал это решение очень очень часто. Однако, чтобы сбросить стили вручную, я пришел к выводу, что это громоздко, учитывая, что, изменяя первоначальное позиционирование / отображение элемента в моем css в процессе разработки, я часто забываю обновить связанный код javascript. Следующий код не сбрасывает стили, скажем так, но удаляет встроенные стили, добавленные javascript:

$("#myDiv")
.css({
    position:   'absolute',
    visibility: 'hidden',
    display:    'block'
});

optionHeight = $("#myDiv").height();
optionWidth = $("#myDiv").width();

$("#myDiv").attr('style', '');

Единственное предположение здесь состоит в том, что не может быть других встроенных стилей, иначе они также будут удалены. Преимущество здесь заключается в том, что стили элемента возвращаются к тому, что было в таблице стилей CSS. Как следствие, вы можете записать это как функцию, через которую передается элемент и возвращается высота или ширина.

Другая проблема, с которой я столкнулся при установке встроенных стилей с помощью js, заключается в том, что при работе с переходами через css3 вы вынуждены адаптировать веса ваших правил стиля, чтобы они были сильнее встроенного стиля, что иногда может разочаровать.

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

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

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

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

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

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

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

Один из обходных путей - создать родительский div вне элемента, для которого вы хотите получить высоту, применить высоту «0» и скрыть любое переполнение. Затем возьмите высоту дочернего элемента и удалите свойство overflow родительского элемента.

var height = $("#child").height();
// Do something here
$("#parent").append(height).removeClass("overflow-y-hidden");

.overflow-y-hidden {
  height: 0px;
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent" class="overflow-y-hidden">
  <div id="child">
    This is some content I would like to get the height of!
  </div>
</div>

Вот скрипт, который я написал для обработки всех методов измерения 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);

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

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

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

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

(спасибо Скитсу О'Рейли за исправление)