无法获取 html 元件的宽度

Question

我使用js创建了一个元素，我已经导入了相关的css，但是我无法获得元素的宽度，这是代码：

css：

#mainDiv{
  position:absolute;
  width:500px;
  height:500px;
}

js：

var mainDiv=document.createElement("div");
mainDiv.setAttribute("id","mainDiv");
document.body.appendChild(mainDiv);

//now I want to get the width of the 'mainDiv'

var wd=mainDiv.style.width;
console.info(wd);

然而，'wd' 的值始终是 ''。

我想知道为什么？

使用萤火虫，我发现'mainDiv'的宽度是500px。

但是为什么我无法在js中获取值？

我不想在 js 中设置“mainDiv”的宽度和高度，例如：

mainDiv.style.width='500px';

我想在 css 中设置大小。

任何想法？

Answer 1

尝试

var wd=mainDiv.clientWidth;

Answer 2

使用 mainDiv.offsetWidth。

希望这可以帮助。

Answer 3

听着，这是一个糟糕的答案，但只需使用 jQuery。

如果你这样做，这将很简单：

var width = $('#mainDiv').width(); // width has the value 500

文档： http://api.jquery.com/width/

Answer 4

为了获得 DOM 元素的实际宽度，您必须使用 offsetWidth。

来自 W3Schools：

offsetWidth：返回元素的宽度，包括边框和填充（如果有），但不包括边距

这个例子应该工作：

var mainDiv=document.createElement("div");
mainDiv.setAttribute("id","mainDiv");
document.body.appendChild(mainDiv);

var wd=mainDiv.offsetWidth;
console.info(wd);

Answer 5

您无法获得宽度，因为您正试图从样式中获得它。 抱歉上车了，基本上是因为您没有设置样式元素，而是定义了 class - JavaScript 无法从元素中读取值。

Answer 6

这是因为该元素尚未渲染。 我知道这很糟糕，但你应该稍微延迟阅读宽度：

var mainDiv=document.createElement("div");
mainDiv.setAttribute("id","mainDiv");
document.body.appendChild(mainDiv);
setTimeout(100, function() {
    console.info(mainDiv.style.width);
});