Javascript 创建 div答案

【问题标题】：Javascript Create DivJavascript 创建 div
【发布时间】：2014-04-08 11:50:53
【问题描述】：

我正在尝试创建一个使用 javascript 创建 5 个随机 DIVS 的页面。出于某种原因，它仅在我的页面上 <!doctype html> 标记之前有任何内容时才有效，这对我来说毫无意义。关于我做错了什么的任何见解？

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>



<div id = "boxHouse">

</div>

<script>
var divNum = 1;
for (x = 0; x<5; x++){

var boxDiv = document.getElementById("boxHouse");

var newElm = document.createElement("div");
newElm.id = divNum;
newElm.style.width = Math.floor((Math.random()*100)+2);
newElm.style.height = Math.floor((Math.random()*100)+2);
newElm.style.border = "thin solid black";
newElm.style.backgroundColor = "#FF0000";

 divNum++

 boxDiv.appendChild(newElm);
  }


 </script>
 </body>
 </html>

【问题讨论】：

“标签前的任何内容”是什么意思？
对不起，它丢失了，如果我在 doctype 标签前添加任何字符，它只会显示 div 的正确性

标签： javascript css html createelement

【解决方案1】：

如果您将单位添加到宽度和高度，您的代码将起作用：

newElm.style.width = Math.floor((Math.random()*100)+2) + "px";
newElm.style.height = Math.floor((Math.random()*100)+2) + "px";

需要这样做的原因是没有单位的 css 大小被丢弃，因此 div 是空的，因此您只能在页面顶部看到它们的边框堆叠为细黑条。

编辑：如果您在 doctype 之前添加一些内容，它起作用的原因是浏览器进入 quirks 模式（与 doctype 的标准兼容模式相反），它更多地接受非标准的东西，例如损坏的 CSS 单元。

【讨论】：

是的。这正是它的问题所在。太感谢了。我再也不会犯这种错误了
我刚刚在帖子上看到了您的编辑，并为此添加了更多细节。在 doctype 之前添加东西会使 doctype 不计数；它关闭标准模式，浏览器更能接受非标准代码的怪癖。