복붙노트

[JQUERY] jQuery를 - 가져 오기 너비 요소의 경우 표시되지 않음 (표시 : 없음)

JQUERY

jQuery를 - 가져 오기 너비 요소의 경우 표시되지 않음 (표시 : 없음)

해결법

  1. 1.여기에 내가 사용한 트릭이다. 그것은 jQuery를이 요소가 볼 생각하게하는 일부 CSS 속성을 추가하는 것을 포함하지만, 사실 그것은 여전히 ​​숨겨져 있습니다.

    여기에 내가 사용한 트릭이다. 그것은 jQuery를이 요소가 볼 생각하게하는 일부 CSS 속성을 추가하는 것을 포함하지만, 사실 그것은 여전히 ​​숨겨져 있습니다.

    var $table = $("#parent").children("table");
$table.css({ position: "absolute", visibility: "hidden", display: "block" });
var tableWidth = $table.outerWidth();
$table.css({ position: "", visibility: "", display: "" });

    그것은 해킹의 일종이지만, 그것은 나를 위해 잘 작동 보인다.

    최신 정보

    나는 이후이 주제를 다루는 블로그 게시물을 작성했습니다. 위에서 사용하는 방법은이 값을 비워하기 위해 CSS 속성을 재설정하고 있기 때문에 문제가 될 수있는 잠재력을 가지고있다. 그들이 이전에 값이 있다면? 업데이트 된 용액 JQuery와 소스 코드에서 발견 된 스왑 () 방법을 사용한다.

    참조 된 블로그 게시물에서 코드 :

    //Optional parameter includeMargin is used when calculating outer dimensions  
(function ($) {
$.fn.getHiddenDimensions = function (includeMargin) {
    var $item = this,
    props = { position: 'absolute', visibility: 'hidden', display: 'block' },
    dim = { width: 0, height: 0, innerWidth: 0, innerHeight: 0, outerWidth: 0, outerHeight: 0 },
    $hiddenParents = $item.parents().andSelf().not(':visible'),
    includeMargin = (includeMargin == null) ? false : includeMargin;

    var oldProps = [];
    $hiddenParents.each(function () {
        var old = {};

        for (var name in props) {
            old[name] = this.style[name];
            this.style[name] = props[name];
        }

        oldProps.push(old);
    });

    dim.width = $item.width();
    dim.outerWidth = $item.outerWidth(includeMargin);
    dim.innerWidth = $item.innerWidth();
    dim.height = $item.height();
    dim.innerHeight = $item.innerHeight();
    dim.outerHeight = $item.outerHeight(includeMargin);

    $hiddenParents.each(function (i) {
        var old = oldProps[i];
        for (var name in props) {
            this.style[name] = old[name];
        }
    });

    return dim;
}
}(jQuery));

  2. 2.

    function realWidth(obj){
    var clone = obj.clone();
    clone.css("visibility","hidden");
    $('body').append(clone);
    var width = clone.outerWidth();
    clone.remove();
    return width;
}
realWidth($("#parent").find("table:first"));

  3. 3.로버츠의 답변에 따라, 여기 내 기능입니다. 요소 또는 그 부모가 jQuery를 통해 페이드 아웃 된 경우 나에게이 작품은 중 내부 또는 외부 치수를 얻을 또한 오프셋 값을 반환 할 수 있습니다.

    로버츠의 답변에 따라, 여기 내 기능입니다. 요소 또는 그 부모가 jQuery를 통해 페이드 아웃 된 경우 나에게이 작품은 중 내부 또는 외부 치수를 얻을 또한 오프셋 값을 반환 할 수 있습니다.

    / EDIT1 : 함수를 다시 썼다. 지금은 작은이고 개체에 직접 호출 할 수 있습니다

    / EDIT2 : 함수는 이제 단지 원래 요소 대신 본체 후 클론 삽입 가능 클론 상속 치수를 유지하기 위해 제작된다.

    $.fn.getRealDimensions = function (outer) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .insertAfter($this);        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();
    return result;
}

var dimensions = $('.hidden').getRealDimensions();

  4. 4.위의 realWidth 기능을 게시 주셔서 감사합니다, 정말 내게 도움이되었다. 위의 "realWidth"기능, 내가 쓴하는 CSS 리셋을 바탕으로, (이유는 아래에 설명).

    위의 realWidth 기능을 게시 주셔서 감사합니다, 정말 내게 도움이되었다. 위의 "realWidth"기능, 내가 쓴하는 CSS 리셋을 바탕으로, (이유는 아래에 설명).

    function getUnvisibleDimensions(obj) {
    if ($(obj).length == 0) {
        return false;
    }

    var clone = obj.clone();
    clone.css({
        visibility:'hidden',
        width : '',
        height: '',
        maxWidth : '',
        maxHeight: ''
    });
    $('body').append(clone);
    var width = clone.outerWidth(),
        height = clone.outerHeight();
    clone.remove();
    return {w:width, h:height};
}

    "realWidth는"기존 태그의 폭을 가져옵니다. 좀 이미지 태그로이 테스트. 이미지가 CSS 크기에 따라 폭 (또는 최대 폭)을 부여했을 때 문제는 그 이미지의 실제 크기를 얻을하지 않습니다이었다. 그것은 그리고 본체에 추가은 "realWidth"기능 클론 : 아마도 상기 IMG "는 100 %의 최대 폭"을 갖는다. 이미지의 원래 크기는 몸보다 큰 경우에, 당신은 몸의 크기가 아니라 그 이미지의 실제 크기를 얻을.

  5. 5.나는 숨겨진 요소에 대한 작업 기능을 찾으려고하지만 난 그 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

  6. 6.당신이 숨겨진 무언가의 폭이 필요하고 당신이 어떤 이유로 든하지 않은 숨길 수 있다면, 당신은 그것을 복제 할 수있는 페이지 떨어져 그것을 표시, 그것은 눈에 보이지 않는 만들 수 있도록 CSS를 변경하고 다음을 측정합니다. 이 숨겨진, 그 후 삭제됩니다 경우 사용자는 현명 아무도 없을 것입니다.

    당신이 숨겨진 무언가의 폭이 필요하고 당신이 어떤 이유로 든하지 않은 숨길 수 있다면, 당신은 그것을 복제 할 수있는 페이지 떨어져 그것을 표시, 그것은 눈에 보이지 않는 만들 수 있도록 CSS를 변경하고 다음을 측정합니다. 이 숨겨진, 그 후 삭제됩니다 경우 사용자는 현명 아무도 없을 것입니다.

    다른 답변 중 일부는 여기에 바로 작동 숨겨진 가시성을하지만, 순식간에 대한 귀하의 페이지에 빈 자리를 차지하게됩니다.

    예:

    $itemClone = $('.hidden-item').clone().css({
        'visibility': 'hidden',
        'position': 'absolute',
        'z-index': '-99999',
        'left': '99999999px',
        'top': '0px'
    }).appendTo('body');
var width = $itemClone.width();
$itemClone.remove();

  7. 7.전에 그 폭을 마지막으로 부모 표시 숨기기을하기 위해선, 부모 표시 쇼를 폭을. 다만 다음과 같은

    전에 그 폭을 마지막으로 부모 표시 숨기기을하기 위해선, 부모 표시 쇼를 폭을. 다만 다음과 같은

    $('#parent').show();
var tableWidth = $('#parent').children('table').outerWidth();
 $('#parent').hide();
if (tableWidth > $('#parent').width())
{
    $('#parent').width() = tableWidth;
}

  8. 8.그것은, 0 A를 불투명도를 설정하여 요소를 숨길 모든 상황에서없는 일이다 것이지만 하나 개의 솔루션은 완전히 투명 요소는 폭 것이다.

    그것은, 0 A를 불투명도를 설정하여 요소를 숨길 모든 상황에서없는 일이다 것이지만 하나 개의 솔루션은 완전히 투명 요소는 폭 것이다.

    드로 다시는 요소가 여전히 공간을 차지하지만, 그 모든 경우에 문제가되지 않을 것입니다.

    예를 들면 :

    $(img).css("opacity", 0)  //element cannot be seen
width = $(img).width()    //but has width

  9. 9.가장 큰 문제는 여기에 대부분의 솔루션이 놓친 요소의 폭이 자주는 HTML로 범위가 지정된 위치에 따라 CSS에 의해 변경되는 것입니다된다.

    가장 큰 문제는 여기에 대부분의 솔루션이 놓친 요소의 폭이 자주는 HTML로 범위가 지정된 위치에 따라 CSS에 의해 변경되는 것입니다된다.

    그것은 단지 현재의 범위에 적용 할 스타일을 가지고 때 몸에의 복제를 추가하여 요소의 offsetWidth를 결정했다면 내가 잘못 폭을 얻을 것입니다.

    예를 들어 :

    // CSS

    .module-용기 누군 데 - {ELEM 국경 : 60 픽셀 검은 색; }

    나는 몸의 맥락에서 내-ELEM의 폭을 결정하려고 할 때 지금은 120 픽셀에 의해 될 것입니다. 대신 모듈 컨테이너를 복제 할 수 있지만, 당신의 JS는 이러한 세부 사항을 알 필요가 없습니다.

    나는 그것을 테스트하지 않은 있지만, 본질적으로 Soul_Master의 솔루션이 제대로 작동 할 수있는 유일한 하나가 될 것으로 보인다. 그러나 불행히도 가능성이 성능을 위해 사용하는 비용과 나쁜 것 구현을보고 (대부분의 해결책뿐만 아니라 여기에 제시된.)

    모든 가능한 다음 사용 가시성에 경우 대신 숨겨진. 이것은 아직도 당신이 모든 소란없이 폭을 계산 할 수있는 요소를 렌더링합니다.

  10. 10.내가 편집 한 간단한 일을 가지고 내 문제를 해결하기에 따라 팀 은행에 의해 게시 대답에 추가합니다.

    내가 편집 한 간단한 일을 가지고 내 문제를 해결하기에 따라 팀 은행에 의해 게시 대답에 추가합니다.

    다른 사람이 같은 문제가있을 수 있습니다; 나는 드롭 다운에서 부트 스트랩 드롭 다운과 함께 일하고 있어요. 그러나 텍스트는이 시점에서 현재 내용으로 넓게 할 수있다 (그리고 CSS를 통해 그 해결에 많은 좋은의 방법이 아니다)은.

    내가 사용 :

    $table.css({ position: "absolute", visibility: "hidden", display: "table" });

    대신, 내용이 넓은 경우 항상 폭 확장 테이블에 컨테이너를 설정한다.

  11. 11.

    jQuery(".megamenu li.level0 .dropdown-container .sub-column ul .level1").on("mouseover", function () {
    var sum = 0;
    jQuery(this).find('ul li.level2').each(function(){
    sum -= jQuery(this).height();
    jQuery(this).parent('ul').css('margin-top', sum / 1.8);
    console.log(sum);
    });
});

    호버에 우리는 목록 항목의 높이를 계산할 수 있습니다.

  12. 12.앞서 언급 한 바와 같이, 복제 및 다른 방법이 다를 수 있습니다 스타일과 동일한 결과를 보장하지 않습니다 연결합니다.

    앞서 언급 한 바와 같이, 복제 및 다른 방법이 다를 수 있습니다 스타일과 동일한 결과를 보장하지 않습니다 연결합니다.

    다음은 내 방식이다. 그것은 숨어 책임이있는 부모를 찾고 부모를 이동, 일시적, 높이 등 필요한 폭을 계산하는 데 숨김 해제

    VAR = 폭으로 parseInt ($의 image.width (), 10); VAR 높이 =에서는 parseInt ($의 image.height (), 10); 경우 (폭 === 0) { 경우 ($ image.css ( "표시") === "없음") { $ image.css ( "표시", "블록"); 폭 =에서는 parseInt ($의 image.width (), 10); 높이 =에서는 parseInt ($의 image.height (), 10); $ image.css ( "디스플레이", "없음"); } 다른 { () image.parents 달러. 각 (함수 () { var에 $ 부모는 $ (이) =; 경우 ($ parent.css ( "표시") === "없음") { $ parent.css ( "표시", "블록"); 폭 =에서는 parseInt ($의 image.width (), 10); 높이 =에서는 parseInt ($의 image.height (), 10); $ parent.css ( "디스플레이", "없음"); } }); } }

    13. from https://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 jQuery를 클론 () 변경 ID로?  (0) 2020.10.11
[JQUERY] JQUERY 검사 요소가 뷰포트에 표시되면 [중복]  (0) 2020.10.11
[JQUERY] 마우스를 두었을 때와 mouseenter 이벤트의 차이점은 무엇입니까?  (0) 2020.10.11
[JQUERY] 없음 '액세스 제어 - - 원산지를 허용'헤더가 요청 된 리소스 오류에 존재  (0) 2020.10.11
[JQUERY] jQuery를 검증 플러그인을 사용자 정의 날짜 형식  (0) 2020.10.11
,

티스토리툴바