Получить ширину div, который был создан в javascript с помощью createElement

#javascript #ajax

Вопрос:

Я использую функцию javascript createElement для создания div, а затем устанавливаю его значение innerHTML. После этого я хочу получить значение ширины, необходимое для отображения div с его полным содержимым.

 var newDiv = document.createElement("div");

newDiv.innerHTML = "My new<br/>DIV";

// Get the width of the div here

Я пробовал следующее:

 Call                                      Result
--------------------------------------    -------------
newDiv.width                              undefined
newDiv.scrollWidth                        0
newDiv.clientWidth                        0
newDiv.offsetWidth                        0
newDiv.innerWidth                         undefined
newDiv.outerWidth                         undefined
newDiv.getBoundingClientRect().width      0

Код javascript для создания div выполняется при обратном вызове AJAX; Я не знаю, имеет ли это какое-либо отношение к проблеме или нет.

1. Его div нет в DOM, поэтому он не имеет высоты или ширины. Вы должны добавить его, прежде чем пытаться получить его ширину.

2. Я не могу напрямую. Это происходит в списке автозаполнения. Он добавляется в элемент списка, но результат тот же. Но, может быть, я мог бы добавить его в DOM, а затем удалить его и добавить в список, как обычно? Я попробую.

3. Возможно, shadow DOM — это решение: developer.mozilla.org/en-US/docs/Web/Web_Components /…

Ответ №1:

Итак, проблема в том, что элемент был только что создан и нигде не добавлен.

Следуйте этим путем —

 var newDiv = document.createElement("div");

Затем добавьте другой элемент внутри HTML, скажем, body .

 document.body.appendChild(newDiv);

И затем, наконец, используйте команду для измерения

 newDiv.clientWidth

Итак, это должно выглядеть примерно так, если попробовать в консоли:

 var newDiv = document.createElement("div");
=> undefined

document.body.appendChild(newDiv);
=> <div></div>

newDiv.clientWidth
=> 1281