无法获取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‘的值始终是'’。

我想知道为什么？

使用firebug，我发现'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/