4

を使用して DIV を動的に作成し、document.createElement内部テキストを追加して、その高さと幅を決定したいとします。offsetWidthDIV を DOM ツリーに追加する前は、やなどのプロパティoffsetHeightが 0 であることがわかりますが、これは想定どおりです。プログラムでツリーに追加されたら、それらのプロパティがすぐに「準備完了」になると期待できますか? それとも、再描画/リフローが遅れて後で発生する可能性がある環境はありますか?

textDiv = document.createElement("div");
textDiv.innerHTML = "some dynamically created string";
console.log(textDiv.offsetWidth); // 0
document.body.appendChild(textDiv);
console.log(textDiv.offsetWidth); // OK?

答えは、「JavaScript インタープリターはシングルスレッドであり、appendChild によってトリガーされる再描画/リフロー イベントはそのスレッドの一部であり、次のステートメントに進む前に終了する」のようなものになると思いますが、誰かが私の理解を確認できますか?

このOpera の記事には、私が探しているものがたくさんありますが、それがどのように Opera 固有のものであるかは明確ではありません。いずれにせよ、アプリケーション開発者は、offsetWidth にアクセスするなどして測定を行うときに、必要な再描画/リフローが正しく行われると想定できるようです。

4

2 に答える 2

1

要素が DOM に追加されるとすぐに、最初からそこにあったかのようにアクセスできるようになります。プレーンで単純な DOM 操作は同期的です。

タイムアウト、インターバル、および Ajax の導入を開始するときは注意してください。

于 2010-02-03T17:16:27.313 に答える
0

私の知る限り、すべてのJavaScript関数またはプロパティがDOMツリーに既に存在する要素で機能した後、DOMツリーに追加された後にのみ読み取り可能です。

私は両方のケースを試しましたが、以下はうまく機能していることがわかりました:

<SCRIPT>
window.onload = function() {
textDiv = document.createElement("div");
textDiv.innerHTML = "some dynamically created string";
alert(textDiv.offsetWidth); // 0
document.body.appendChild(textDiv);
alert(textDiv.offsetWidth); // OK?
};

于 2010-02-03T06:15:32.737 に答える