는 jQuery를 그려되지 않은 동적 요소의 크기를 얻을 수 있습니다

Question

내가 jQuery를하고 DOM

var MainHolder = $(document.createElement("div")).addClass("box"); 

와 요소를 만드는 경우 내가 창에있는 요소를 그리지 않고 MainHolder.width()를 호출 할 수 있다면 의미 무엇 그것은 cleaver이고 .box CSS 클래스에서 너비를 얻거나 작동하지 않을 수 있도록 그려지지 않았으므로 0을 리턴하겠습니까?

Answer 1

당신은 요소를 그릴 폭을 얻고, 그것을 열어 젖히다 수 :

var MainHolder = $(document.createElement("div")).addClass("box").css({ 
    position: "absolute", 
    left: -9999 
}).appendTo("body"); 

var width = MainHolder.width(); 

MainHolder.css({ 
    position: "static", 
    left: "auto" 
}).detach(); 

Answer 2

Jquery는 그려지지 않은 요소의 너비를 가져올 수 없습니다.

이전에 수행 한 작업은 요소의 위쪽 여백을 -1000으로 설정하고 절대 위치를 절대 너비로 설정 한 후 너비와 높이를 얻은 다음 오른쪽 여백을 설정합니다.

Answer 3

jQuery .width()을 사용하면 HTML 문서의 요소 너비 만 가져올 수 있습니다. 내 예에서

나는 200px에 CSS의 폭을 설정 한 아래 :

Example without appended to HTML body - returns 0

Example when appended to HTML body - returns 200

내가이 주된 이유가 요소에 box을 적용하고 찾고 있다고 믿습니다 .container .box 또는 .container2 .box과 같은 규칙이있는 경우 .box 규칙은 작동하지 않습니다. jQuery는 너비가 무엇인지 이해하기 위해이 요소가 문서 내에서 어디에 속해야 하는지를 알아야한다.

Answer 4

를 내 의견으로는, $.hide()는이 목적을 위해 CSS 위치보다 낫다. left: -9999의 요소는 다른 CSS 스타일에 따라 계속 표시 될 수 있습니다.

$('<div></div>').addClass('box').hide().appendTo('body').width() 

jsfiddle