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

숨겨진 요소에 대한 올바른 값을 제공하거나 요소에 숨겨진 부모가 있습니다.

전체 문서는 여기 를 참조 하십시오 . 페이지에 데모 포함도 있습니다.

이 도움을 바랍니다 :)

두 가지 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의 답변과 JSBin에서 사용자 hitautodestruct의 플러그인을 더 발전 시켜서 너비와 높이를 모두 검색하고 이러한 값을 포함하는 객체를 반환하는 비슷한 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;
};

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 속성을 설정하면 속성이 인라인으로 삽입되어 CSS 파일에있는 다른 속성을 덮어 씁니다. HTML 요소에서 스타일 속성을 제거하면 모든 것이 정상으로 돌아가고 처음에는 숨겨져 있기 때문에 여전히 숨겨져 있습니다.

텍스트 들여 쓰기 이미지 대체 기술과 같이 display : none을 사용하지 않고 음수 여백으로 화면 밖으로 숨겨진 div를 배치 할 수도 있습니다.

예.

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

이 방법으로 height ()를 계속 사용할 수 있습니다.

숨겨진 요소에 대한 작업 기능을 찾으려고하지만 CSS는 모든 사람이 생각하는 것보다 훨씬 복잡하다는 것을 알고 있습니다. CSS3에는 유연한 상자, 격자, 열 또는 복잡한 부모 요소 내부의 요소와 같은 이전의 모든 답변에서 작동하지 않을 수있는 새로운 레이아웃 기술이 많이 있습니다.

flexibox 예

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

안타깝게도 JavaScript는 요소가 표시되거나 숨겨 질 때 알려주는 직접적인 이벤트를 제공하지 않습니다. 그러나 요소의 가시성이 변경되면 콜백 함수를 실행하는 DOM 속성 수정 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의 솔루션에 따라 요소의 가시성을 설정하면 정확한 치수를 얻을 수 있습니다. 이 솔루션을 매우 자주 사용했습니다. 그러나 스타일을 수동으로 재설정 해야하는 경우 개발을 통해 CSS에서 요소의 초기 위치 지정 / 표시를 수정하면 관련 자바 스크립트 코드를 업데이트하는 것을 종종 잊어 버립니다. 다음 코드는 말 당 스타일을 재설정하지 않지만 자바 스크립트로 추가 된 인라인 스타일을 제거합니다.

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

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

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

여기서 유일한 가정은 다른 인라인 스타일이 없거나 다른 스타일도 제거된다는 것입니다. 그러나 여기서 이점은 요소의 스타일이 CSS 스타일 시트에 있던 스타일로 반환된다는 것입니다. 결과적으로 이것을 요소가 전달되고 높이 또는 너비가 반환되는 함수로 작성할 수 있습니다.

js를 통해 스타일을 인라인으로 설정하는 또 다른 문제는 css3를 통한 전환을 처리 할 때 스타일 규칙의 가중치를 인라인 스타일보다 더 강하게 적용해야하므로 때로는 실망 스러울 수 있다는 것입니다.

정의에 따르면 요소는 보이는 경우에만 높이를 갖습니다.

궁금한 점 : 숨겨진 요소의 높이가 왜 필요한가요?

한 가지 대안은 z- 인덱스를 사용하여 오버레이를 배치하여 요소 를 효과적으로 숨기는 것입니다.

내 상황에서 나는 또한 높이 값을 얻는 것을 막는 숨겨진 요소가 있었지만 요소 자체가 아니라 부모 중 하나였습니다 ... 그래서 플러그인 중 하나가 있는지 확인하기 만하면됩니다. 숨겨진 경우 가장 가까운 숨겨진 요소를 찾으십시오. 예를 들면 다음과 같습니다.

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 및 Eyelidlessness의 응답을 결합하여 Gregory의 개선 된 방법을 사용하지만 스타일 속성에 무언가 되돌려 놓을 것으로 예상되는 경우 두 방법을 모두 사용합니다. 부모 요소.

내 솔루션에 대한 유일한 단점은 부모를 통한 루프가 완전히 효율적이지 않다는 것입니다.

한 가지 해결 방법은 높이를 얻으려는 요소 외부에 부모 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 요소 (.get (0)을 사용하여 jQuery에서 도달 가능)에서 직접 높이를 가져올 수 있습니다.

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

너비와 동일합니다.

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

(Skeets O'Reilly에게 감사를 표합니다)