jQuery: jQuery에서 숨겨진 요소의 높이를 가져옵니다.

jQuery: jQuery에서 숨겨진 요소의 높이를 가져옵니다.

숨겨진 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');

숨겨진 요소에 대한 올바른 값을 제공하거나 숨겨진 상위 요소를 가집니다.

자세한 내용은 여기를 참조하십시오.페이지에는 데모도 포함되어 있습니다.

이것이 도움이 되기를 바랍니다:)

디스플레이 스타일과 가시성 스타일이라는2개의 CSS 스타일을 설정합니다.

가시성 css 스타일을 설정하여 요소를 숨길 경우 요소의 표시 여부에 관계없이 높이를 얻을 수 있습니다.요소는 여전히 페이지에 공간을 차지하기 때문입니다.

표시 css 스타일을 "없음"으로 변경하여 요소를 숨긴 경우 요소는 페이지에 공간을 차지하지 않으므로 요소를 어떤 공간에서 렌더링할 수 있는 표시 스타일을 지정해야 합니다. 이때 높이를 얻을 수 있습니다.

나는 사실 가끔 이것을 처리하기 위해 약간의 속임수를 썼다.저는 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 조상을 재귀적으로 통과해야 할 수 있습니다.

사용자 Nick의 답변과 사용자 hitautodestruct의 JSBin 플러그인을 기반으로 폭과 높이를 모두 검색하여 이러한 값을 포함하는 개체를 반환하는 유사한 jQuery 플러그인을 만들었습니다.

다음 URL에서 찾을 수 있습니다.

갱신하다

이 작은 플러그인을 완전히 재설계했습니다.이전 버전(상기)은 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;
};

Nick의 답변을 바탕으로:

$("#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 Atribut을 설정하면 CSS Atribut이 인라인에 삽입되고 CSS 파일에 있는 다른 Atribut이 덮어씁니다.HTML 요소에서 스타일 속성을 삭제하면 원래 숨겨져 있던 모든 것이 정상으로 돌아와 여전히 숨겨져 있습니다.

display:none을 사용하는 대신 숨겨진 div를 음의 여백으로 화면에 배치할 수도 있습니다.이것은 텍스트 들여쓰기 이미지 치환 기술과 매우 유사합니다.

예:

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

이렇게 해도 high()는 계속 사용할 수 있습니다.

숨겨진 요소의 기능을 찾으려 노력하지만 CSS는 모두가 생각하는 것보다 훨씬 복잡하다는 것을 알게 되었습니다.CSS3에는 플렉시블 박스, 그리드, 컬럼, 복잡한 부모 요소 내부의 요소 등 이전의 모든 답변에 적용되지 않는 새로운 레이아웃 기법이 많이 있습니다.

플렉시박스 예시

지속 가능하고 심플한 솔루션은 실시간 렌더링뿐이라고 생각합니다.이 때 브라우저는 올바른 요소 크기를 제공해야 합니다.

안타깝게도 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

Nick Craver의 솔루션에 따라 요소의 가시성을 설정하면 정확한 치수를 얻을 수 있습니다.저는 이 솔루션을 매우 자주 사용해 왔습니다.그러나 수동으로 리셋을 해야 하기 때문에 개발을 통해 요소의 초기 위치 설정/표시를 변경하는 것이 번거롭기 때문에 관련 Javascript 코드를 업데이트하는 것을 잊어버리는 경우가 많습니다.다음 코드는 speak당 스타일을 리셋하지 않고 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');
    }
}

실제로 이것은 Nick, Gregory 및 Sneafless의 응답을 통합하여 Gregory의 개선된 방법을 사용하지만 스타일 속성에 되돌리고 싶은 것이 있을 경우 두 가지 방법을 모두 사용하여 상위 요소를 찾습니다.

내 해결책에 대한 나의 유일한 불만은 부모들을 통한 루프가 완전히 효율적이지 않다는 것이다.

한 가지 해결 방법은 높이를 얻고자 하는 요소 외부에 부모 div를 만들고 높이 '0'을 적용하고 오버플로를 숨기는 것입니다.그런 다음 하위 요소의 높이를 가져와서 상위 요소의 오버플로 속성을 제거합니다.

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;

(Skets O'Reilly 수정 덕분)

언급URL : https://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery