無法獲取 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);
});