복붙노트

[JQUERY] jQuery를이 : jQuery를에 숨겨진 요소의 높이를 가져옵니다

JQUERY

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

해결법

  1. 1.이미 절대의 경우 이런 식으로 뭔가를 할 수있는, 조금 해키하지만이 위치를 잊지 :

    이미 절대의 경우 이런 식으로 뭔가를 할 수있는, 조금 해키하지만이 위치를 잊지 :

    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 : "");

  2. 2.나는 그것을 해결하기 위해이 플러그인을 호출 JQuery와 실제 쓴 그래서 나는, 숨겨진 요소의 폭을 점점과 같은 문제 다 퉜다. 사용하는 대신

    나는 그것을 해결하기 위해이 플러그인을 호출 JQuery와 실제 쓴 그래서 나는, 숨겨진 요소의 폭을 점점과 같은 문제 다 퉜다. 사용하는 대신

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

    사용하다

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

    숨겨진 요소 또는 요소에 대해 당신에게 올바른 가치를 줄 것이다하는 것은 숨겨진 부모가.

    이 도움말을 희망 :)

  3. 3.두 CSS 스타일, 표시 스타일 및 가시성 스타일을 혼동하고 있습니다.

    두 CSS 스타일, 표시 스타일 및 가시성 스타일을 혼동하고 있습니다.

    요소가 가시성 CSS 스타일을 설정하여 숨겨져있는 경우에, 당신은 요소가 여전히 페이지 공간을 필요로에 관계없이 요소를 볼 수 있는지 여부의 여부 높이를 얻을 수 있어야합니다.

    요소가 "없음"으로 표시 CSS 스타일을 변경하여 숨겨져있는 경우에, 요소 페이지에 공간을 차지하지 않으며, 당신은 그것을 요소가 일부 공간에 렌더링하게됩니다 디스플레이 스타일을 제공 할 것이다 그 시점, 당신은 높이를 얻을 수 있습니다.

  4. 4.사실은 시간이 처리하는 속임수의 비트에 의존했습니다. 내가 개발 한 jQuery를 스크롤 위젯 나는 스크롤 콘텐츠를 마크 업 여부의 숨겨진 조각의 일부인 경우 내가 미리 모르는 문제가 발생 어디에. 여기에 내가했던 일이야 :

    사실은 시간이 처리하는 속임수의 비트에 의존했습니다. 내가 개발 한 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 조상의 통과는 해당 부모 요소의 폭을 찾을 수 있습니다.

  5. 5.JSBin에 사용자 닉의 대답과 사용자 hitautodestruct의 플러그인에 추가로 구축, 나는 폭과 높이를 모두 검색하고이 값을 포함하는 객체를 반환하는 유사한 jQuery 플러그인을 만들었습니다.

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

  6. 6.닉의 대답에 더 건물 :

    닉의 대답에 더 건물 :

    $("#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 요소의 스타일 속성을 제거함으로써, 모든 것이 정상으로 돌아 여전히 숨겨져.

  7. 7.또한 음의 여백보다는 디스플레이를 사용하여 화면 오프 숨겨진 DIV의 위치를 ​​수 없었다 : 아무도을 많이 텍스트 들여 쓰기 이미지 교체 기법처럼.

    또한 음의 여백보다는 디스플레이를 사용하여 화면 오프 숨겨진 DIV의 위치를 ​​수 없었다 : 아무도을 많이 텍스트 들여 쓰기 이미지 교체 기법처럼.

    예를 들면.

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

    이 방법 높이 ()을 계속 사용할 수 있습니다.

  8. 8.나는 숨겨진 요소에 대한 작업 기능을 찾으려고하지만 난 그 CSS 모두가 생각하는 것보다 훨씬 복잡 알고 있습니다. CSS3의 새로운 레이아웃 기법이 많이 있다는 것을 유연 상자, 그리드, 열 또는 복합 부모 요소 내부에서도 요소와 같은 이전의 모든 답변을하지 작동 할 수 있습니다.

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

    flexibox 예

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

    슬프게도, 자바 스크립트 요소가 보였다 또는 숨겨진 될 때 통지하는 직접적인 이벤트를 제공하지 않습니다. 그러나, 소자의 시야가 변경 될 때 콜백 함수를 실행 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

  9. 9.닉 Craver의 솔루션에 이어, 요소의 가시성을 설정하는 것은 정확한 치수를 얻을 수 있습니다. 나는 매우 자주이 솔루션을 사용했습니다. 그러나 수동으로 스타일을 재설정하는 데, 나는 개발을 통해 내 CSS에서 요소의 초기 위치 / 표시를 수정, 나는 종종 관련 자바 스크립트 코드를 업데이트하는 것을 잊지 주어진이 성가신을 찾아 왔어요. 다음 코드는 자바 스크립트에 의해 추가 된 인라인 스타일을 말 당 스타일을 재설정하지만 제거하지 않습니다

    닉 Craver의 솔루션에 이어, 요소의 가시성을 설정하는 것은 정확한 치수를 얻을 수 있습니다. 나는 매우 자주이 솔루션을 사용했습니다. 그러나 수동으로 스타일을 재설정하는 데, 나는 개발을 통해 내 CSS에서 요소의 초기 위치 / 표시를 수정, 나는 종종 관련 자바 스크립트 코드를 업데이트하는 것을 잊지 주어진이 성가신을 찾아 왔어요. 다음 코드는 자바 스크립트에 의해 추가 된 인라인 스타일을 말 당 스타일을 재설정하지만 제거하지 않습니다

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

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

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

    여기에 유일한 가정이 다른 인라인 스타일이 될 수 없습니다 그렇지 않으면 그들은 제거 aswell이 될 것입니다. 여기 장점은, 그러나, 요소의 스타일들이 CSS 스타일 시트에 무엇인지에 반환되는 것입니다. 결과적으로, 당신은 요소가 통과되는 함수로 이것을 쓸 수 있고, 높이 또는 폭이 반환됩니다.

    내가 JS를 통해 인라인 스타일을 설정하는 것으로 나타났습니다 또 다른 문제는 CSS3를 통해 전환을 처리 할 때, 당신은 때때로 좌절 할 수있는 인라인 스타일,보다 강한로 당신의 스타일 규칙 '가중치를 적용하도록 강요 될 것입니다.

  10. 10.그것을 볼 수 있다면 정의에 의하면, 요소는 높이를 가지고있다.

    그것을 볼 수 있다면 정의에 의하면, 요소는 높이를 가지고있다.

    그냥 궁금 : 왜 당신이 숨겨진 요소의 높이를 필요합니까?

    효율적으로) 어떤 종류의 오버레이 (Z-인덱스를 사용) 뒤에 그것을 넣어 요소를 숨길 수있는 하나 개의 대안이다.

  11. 11.난 그냥 그것의 있는지 확인하기 위해 내 플러그인 중 하나에 대한 점검에 넣어 있도록 내 상황에서 ... 나는 또한 높이 값을 얻기에서 저를 정지 숨겨진 요소를했다,하지만 요소 자체가 아니라 그것의 부모 중 하나가 아니었다 숨겨진, 다른 가장 가까운 숨겨진 요소를 찾을 수 있습니다. 다음은 그 예이다 :

    난 그냥 그것의 있는지 확인하기 위해 내 플러그인 중 하나에 대한 점검에 넣어 있도록 내 상황에서 ... 나는 또한 높이 값을 얻기에서 저를 정지 숨겨진 요소를했다,하지만 요소 자체가 아니라 그것의 부모 중 하나가 아니었다 숨겨진, 다른 가장 가까운 숨겨진 요소를 찾을 수 있습니다. 다음은 그 예이다 :

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

    사실, 이것은 당신에게 그레고리의 개선 된 방법의 사용을 줄 닉, 그레고리 및 Eyelidlessness 님의 답변 융합이지만, 모두 다시 넣어 원하는 스타일 속성에 뭔가있을 예정이다 경우에 방법 및 외모를 활용 부모 요소.

    내 솔루션 내 유일한 불만은 부모를 통해 루프가 완전히 효율적이지 못하다는 것이다.

  12. 12.한 가지 해결 방법은 당신의 높이를 취득 할 요소 외부 부모 DIV를 만드는 것입니다, '0'의 높이를 적용하고 오버 플로우를 숨 깁니다. 다음으로, 자식 요소의 높이를 가지고 부모의 오버 플로우 속성을 제거합니다.

    한 가지 해결 방법은 당신의 높이를 취득 할 요소 외부 부모 DIV를 만드는 것입니다, '0'의 높이를 적용하고 오버 플로우를 숨 깁니다. 다음으로, 자식 요소의 높이를 가지고 부모의 오버 플로우 속성을 제거합니다.

    VAR 높이 = $ ( "# 아이") 높이 ().; // 여기에 어떻게 좀 $ ( "# 부모") APPEND (높이) .removeClass ( "오버 플로우-Y-숨겨."); .overflow-Y-숨겨진 { 높이 : 0 픽셀; 오버 플로우-Y : 숨겨진; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    이것은 내가의 높이를 좀하고 싶습니다 일부 콘텐츠입니다!

  13. 13.여기에 숨겨진 요소 숨겨진 부모도 후손 jQuery의 차원의 방법을 모두 처리하기 위해 쓴 스크립트입니다. 물론, 성능있다, 참고이를 사용했다.

    여기에 숨겨진 요소 숨겨진 부모도 후손 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);

  14. 14.이미 이전 페이지 요소를 표시 한 경우는 요소가 숨겨져있는 경우에도 설정되어 있기 때문에, 당신은 단순히 (갔지 (0)와 jQuery를에 도달)을 DOM 요소에서 직접 높이를 취할 수 있습니다 :

    이미 이전 페이지 요소를 표시 한 경우는 요소가 숨겨져있는 경우에도 설정되어 있기 때문에, 당신은 단순히 (갔지 (0)와 jQuery를에 도달)을 DOM 요소에서 직접 높이를 취할 수 있습니다 :

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

    동일한 너비 :

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

    (정정 Skeets 오라일리 덕분)

    15. from https://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 네임 스페이스와 XML 파싱을 위해 jQuery를 사용하는 방법  (0) 2020.10.02
[JQUERY] jQuery를 XML 오류 '없음'액세스 제어 - - 원산지를 허용 '헤더가 요청 된 자원에 존재합니다.'  (0) 2020.10.02
[JQUERY] 내가 값을 설정할 때 왜 JQuery와 변경 이벤트가 트리거하지 않는 발을 사용하여 선택 ()?  (0) 2020.10.02
[JQUERY] 자바 스크립트 (jQuery를 또는 바닐라)와 / 선택을 취소 확인란을 선택?  (0) 2020.10.02
[JQUERY] 어떻게 jQuery를 AJAX 요청 중지 / 취소하려면?  (0) 2020.10.02
,

티스토리툴바