2

ランダムな量の div を作成するスクリプトを作成できません。この特定の例では、5 から 20 の間です。問題はおそらく for ループにありますか? 乱数を生成する関数は、以下のランダムカラー関数で正しく動作していますが、何らかの理由で認識されていないのでしょう。また、firebugでエラーが発生していません。

例：

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 に追加したことがない

「DocumentFragments は 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 に答える