DOM에 추가하기 전에 요소 높이 가져 오기

요소 높이를 DOM에 추가하기 전에 높이를 가져 오는 방법이 있습니까? 나는 clientHeight가 시도한 것처럼 작동하지 않으며 항상 0을 반환한다는 것을 알고 있습니다. 높이를 계산할 수있는 다른 메소드가 있거나 DOM의 일부가되어야하는 요소입니까? DOM에 추가하기 전에 요소 높이 가져 오기

이

내가 갈거야 무엇의 샘플입니다

function test(a) { 
    var a=document.createElement(a) 
    a.style.top=(window.innerHeight/2-a.clientHeight/2)+'px' //fixed position in CSS 
    document.body.appendChild(a) 
    }

* 참고 :이 내가 노력하고있어 투영하기 위해 일하고 있어요 기능의 단순화 된 버전입니다 불필요한 혼란없이 성취해라.

출처

2011-05-10 Ruffy

다른 요소는 다른 속성을가집니다. 좋은 답변을 원하면 특정 유형을 알아야합니다. – Kayla

요소 은 DOM에 추가 될 때까지의 높이가 있습니다. 실제 스타일에서는 그 스타일을 평가할 수 없으므로 DOM에 추가 될 때까지 높이가됩니다.

visibility: hidden을 사용하면 쉽게이 문제를 해결할 수 있으므로 눈에 띄는 깜박임없이 요소를 DOM에 추가 할 수 있습니다. (jsFiddle)

function test(a) { 
    var a=document.createElement(a); 
    a.style.visibility = "hidden"; 
    document.body.appendChild(a); 
    a.style.top=(window.innerHeight/2-a.clientHeight/2)+'px'; 
    a.style.visibility = ""; 
}

(이 요소가 절대 위치 또는 고정되어 있기 때문에 당신이 top를 사용하는 가정에 노력이 아니었다면., 그렇게 일시적으로 만들 필요가 것입니다.) 숨겨진 요소는 여전히 DOM에서 공간을 차지하므로 (크기를 계산해야 함) 사용자가 실제로 볼 수는 없습니다.

출처

2011-05-10 00:53:52

사실상 순간적으로 깜박 거리는 것이 문제가되지 않습니다. 편집 : 이것은 작동하지 않습니다! 필자는 요소를 추가 한 후에 변수로 속성을 변경하더라도 아무런 영향을 미치지 않을 것이라고 생각했지만 분명히 그 기능은 내가 찾던 솔루션만큼 좋습니다. – Ruffy

@ 지미 - 무슨 뜻인지 잘 모르겠습니다. 'a'는 DOM에 추가 한 후에도 정상적으로 조작 할 수 있습니다. 높이에 영향을 줄 수있는 변경 사항은'appendChild'와'a.top' 라인 사이에 위치해야하지만, 그것 이외의 모든 것은 예상대로 작동해야합니다. –

처음으로 시도 할 때 함수에 오류가 있다는 것을 알게되었습니다 (실제 함수에는 서로 많은 요소가 있음). 그것은 끝에 배치 된 후에 추가했을 때 효과적이었습니다. 이것은 다른 순서로 조금이라도 찾고있는 해결책이었습니다. – Ruffy

DOM에 추가하기 전에 요소 높이 가져 오기

답변

관련 문제