Можно ли сразу прочитать размеры элемента после добавления его в дерево DOM?

Question

Предположим, я динамически создаю DIV, используя document.createElement, добавляю некоторый внутренний текст и хочу определить его высоту и ширину. Я вижу, что перед добавлением DIV в дерево DOM такие свойства, как offsetWidth и 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 является однопоточным, и событие repaint / reflow, инициируемое appendChild, является частью этого потока и завершается перед переходом к следующему утверждению» ... но кто-то может проверить мое понимание?

Эта статья об опере содержит много того, что я ищу, но не ясно, насколько она специфична для Opera. В любом случае кажется, что разработчик приложения может предположить, что при проведении измерений, например, путем доступа к offsetWidth, правильно происходит любая необходимая перекраска / перекомпоновка.

Answer 1

Как только ваш элемент добавлен в DOM, он должен быть доступен для доступа, как если бы он был там с самого начала. Простые, простые манипуляции с DOM синхронны.

Будьте внимательны, когда начинаете вводить тайм-ауты, интервалы и Ajax.

Answer 2

Насколько я знаю, они доступны для чтения только после их добавления в дерево DOM после того, как все функции или свойства javascript работают с элементами, которые уже есть в дереве 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?
};