web-dev-qa-db-ja.com

DOMに追加する前に要素の高さを取得する

DOMに追加する前に要素の高さを取得する方法はありますか？私が試したようにclientHeightが機能せず、常に0を返します。高さを返す他のメソッドはありますか、または高さを計算するために要素が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)
    }

*注意：これは、不要な混乱なしに達成しようとしていることを投影するために私が取り組んでいる関数の単純化されたバージョンにすぎません。

javascriptdomheightappendelement
34
Ruffy

要素は、それまではスタイルを評価できないため、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では（したがって、サイズを計算する必要があります）、実際にはユーザーに表示されません。

40
Ben Blank

これは、要素をbrieflyDOMに追加して高さを検査し、次に削除して要素を測定する方法のデモです。ノードが複製されるため、このメソッドはコストがかかる可能性があります。そのため、追加されたスタイルが後でノードに影響を与えることはなく、すべてのDOMイベントが削除されます。

検査されたノードに多くのサブノードがある場合、これは効率的ではないかもしれませんが、スティルは非常に便利です。

function getNodeHeight(node) {
    var height, clone = node.cloneNode(true)
    // hide the meassured (cloned) element
    clone.style.cssText = "position:fixed; top:-9999px; opacity:0;"
    // add the clone to the DOM 
    document.body.appendChild(clone)
    // meassure it
    height = clone.clientHeight
    // cleaup 
    clone.parentNode.removeChild(clone)
    return height
}


var newDiv = document.createElement("div");
newDiv.innerHTML = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<h1>deserunt mollit anim id est laborum.<h1>`


// print the height of "newDiv"
console.log( getNodeHeight(newDiv) )
0
vsync