無法獲取元素的寬度相同的功能

Question

創建我試圖以編程方式創建乘法的div，並設置一個div的寬度別人寬，有點像這樣：

var container1 = document.createElement("div"); 
 
container1.style.width = "400px"; 
 
container1.appendChild(document.createElement("h1")); 
 
container1.getElementsByTagName("h1")[0].innerHTML = "Hello there!"; 
 
document.getElementById("frame").appendChild(container1); 
 

 
var container2 = document.createElement("div"); 
 
container2.style.width = container1.offsetWidth; 
 
container2.appendChild(document.createElement("h2")); 
 
container2.getElementsByTagName("h2")[0].innerHTML = "My width is " + container2.offsetWidth; 
 
document.getElementById("frame").appendChild(container2);

#frame div { 
 
    background-color: red; 
 
}

<div id="frame"></div>

爲什麼我不能得到元素的offsetWidth？有什麼我可能理解的錯誤是關於如何創建，插入和計算瀏覽器的元素？

預先感謝您！

Answer 1

嘗試添加"px" affter寬度：

只能追加到html

var container1 = document.createElement("div"); 
 
container1.style.width = "400px"; 
 
container1.appendChild(document.createElement("h1")); 
 
container1.getElementsByTagName("h1")[0].innerHTML = "Hello there!"; 
 
document.getElementById("frame").appendChild(container1); 
 

 
var container2 = document.createElement("div"); 
 
container2.style.width = container1.offsetWidth + "px"; 
 
//          here ^^^^^^^ 
 
container2.appendChild(document.createElement("h2")); 
 
container2.getElementsByTagName("h2")[0].innerHTML = "My width is " + container2.offsetWidth; //Wont be able to get width here as you did not add to HTML yet! 
 
document.getElementById("frame").appendChild(container2); 
 
container2.getElementsByTagName("h2")[0].innerHTML = "My width is " + container2.offsetWidth;

#frame div { 
 
    background-color: red; 
 
}

<div id="frame"></div>