JavaScript로 동적으로 추가 된 요소의 너비를 얻는 방법

Question

y- 라인에서 자식 요소를 유지하는 가로로 스크롤 할 수있는 컨테이너를 만들고 싶습니다 (너비가 화면의 100 %가됩니다).

데이터가 수정 된 경우 컨테이너의 너비를 렌더링하고 설정하기 전에이를 계산합니다. 문제는 내 데이터가 동적이며 추가 할 하위 요소의 수와 너비를 알 수 없다는 것입니다. 그래서 컨테이너 DOM에 아이들처럼 동적으로 추가하기로 결정했습니다.하지만 추가 한 후에 너비를 얻으려고하면 결과는 0입니다. 내가 잘못하고있는 것, 또는 그 일을하는 데 더 좋은 생각이 있다면 너의 길을 보니 기쁘다.

이 내가 지금 뭐하는 거지입니다 :

GalleryContainer.prototype.addItem = function(newItem) { 
    var newItemDiv = document.createElement('div'); 
    newItemDiv.className = 'thumbnail'; 

    content = document.createElement('img'); 
    content.setAttribute('src', newItem); 

    newItemDiv.appendChild(content); 
    this.galleryDiv.appendChild(newItemDiv); 
    this.galleryArray.push(newItemDiv); 

     // width, offsetWidth, all properties are 0 
     console.log(newItemDiv.style.offsetWidth); 
     console.log($(content).css('width')); 
     console.log($(newItemDiv).innerWidth()); 

} 

편집 : 내가 그것을 내가 필요로하는 실제 크기입니다, 내 문제와 폭이 0이 아닌 데모에 jsfiddle 예를했다, 그래서 나는 그 문제를 더 깊이 살펴야 만한다. 어쩌면 당신의 newItemDiv는 HTML 문서에 추가되지 http://jsfiddle.net/valkirilov/QaHn7/1/

Answer 1

를 넣고 코드를 작동 :

var newItemDiv = document.createElement('div'); 
newItemDiv.className = 'thumbnail'; 
$('body').append(newItemDiv); 


// width, offsetWidth, all properties are 0 
console.log(newItemDiv.style.offsetWidth); 
console.log($(content).css('width')); 
console.log($(newItemDiv).innerWidth());