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

你无法获得宽度，因为你试图从风格中获取它。抱歉进入火车，主要是因为你没有设置样式元素而是定义一个类 - JavaScript无法从元素中读取值。

Answer 6

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

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

无法获得html元素的宽度

6 个答案: