2

我无法制作脚本来创建随机数量的 div。在这个 5 到 20 之间的具体示例中。问题可能出在 for 循环中？生成随机数的函数在下面的随机颜色函数中正常工作，我猜由于某些原因它无法识别。我也没有在萤火虫中得到任何错误。

例子：

function generateDiv(){
    var dfrag = document.createDocumentFragment();
    var count = generateRandom(5, 20);
    var i=0;
    for (var i = 0; i < count; i++){
        var div = document.createElement("div");
        dfrag.appendChild(div);
    }
}
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
    div = divs[i];
    alterDivStyle(div);
}
function rndColor() {
    var r = ('0' + generateRandom(0,255).toString(16)).substr(-2), // red
          g = ('0' + generateRandom(0,255).toString(16)).substr(-2), // green
          b = ('0' + generateRandom(0,255).toString(16)).substr(-2); // blue
    return '#' + r + g + b;
}

function generateRandom(min, max) {
    var number = Math.floor(Math.random() * (max - min )) + min;
    return number;
}
function alterDivStyle(div){
    div.style.width = generateRandom(20, 100) +"px";
    div.style.height = generateRandom(20, 100) +"px";
        div.style.backgroundColor = rndColor();
    div.style.color = rndColor();
    div.style.position = "absolute";
    div.style.border = "solid";
    div.style.borderColor = rndColor();
    div.style.borderWidth = rndColor();
    div.style.borderRadius = generateRandom(0, 10)+"px";
    div.innerHTML = "<strong>div</strong>";
};
4

3 回答 3

6

您从未将文档片段添加到 DOM

“DocumentFragment 是 DOM 节点。它们绝不是主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被它的所有孩子替换。”

https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment

于 2013-08-23T09:44:28.240 回答
0

1）您在错误的位置关闭了“generateDiv 函数”，将右括号从“var divs”之前移动到“var divs”循环之后。

2）您正在更改 DOM 中的所有现有 div： var divs = document.getElementsByTagName("div"); 不要那样做，使用 dfrag。

3) 就像 Matthew 说的，你必须将 dfrag 添加到 DOM 中。

于 2013-08-23T09:54:51.477 回答
0 
function generateDiv(){
  var dfrag = document.createDocumentFragment();
  var count = generateRandom(5, 20);
  var i=0;
  for (var i = 0; i < count; i++){
    var div = document.createElement("div");
    dfrag.appendChild(div);
  }
  for (i = 0; i < dfrag.childNodes.length; i++) {
    div = dfrag.childNodes[i];
    alterDivStyle(div);
  }
  document.body.appendChild(dfrag);
}
function rndColor() {
  var r = ('0' + generateRandom(0,255).toString(16)).substr(-2), // red
  g = ('0' + generateRandom(0,255).toString(16)).substr(-2), // green
  b = ('0' + generateRandom(0,255).toString(16)).substr(-2); // blue
  return '#' + r + g + b;
}

function generateRandom(min, max) {
  var number = Math.floor(Math.random() * (max - min )) + min;
  return number;
}
function alterDivStyle(div){
  div.style.width = generateRandom(20, 100) +"px";
  div.style.height = generateRandom(20, 100) +"px";
  div.style.backgroundColor = rndColor();
  div.style.color = rndColor();
  div.style.position = "absolute";
  div.style.border = "solid";
  div.style.borderColor = rndColor();
  div.style.borderWidth = rndColor();
  div.style.borderRadius = generateRandom(0, 10)+"px";
  div.innerHTML = "<strong>div</strong>";
};  
generateDiv();
于 2013-08-23T10:02:14.850 回答