javascript - 使用 createElement 获取在 javascript 中创建的 div 的宽度

Question

我正在使用 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

创建 div 的 javascript 代码在 AJAX 回调上执行；我不知道这是否与问题有关。

标签： javascriptajax

Answer 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>​&lt;/div>​

newDiv.clientWidth
=> 1281