[javascript] jQuery : jQuery에서 숨겨진 요소의 높이 가져 오기

JAVASCRIPT / 글쓴이

숨겨진 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 ()를 계속 사용할 수 있습니다.