1

量やサイズなどのユーザー入力値を使用して、いくつかのdivを作成しようとしています。

私の状況では、divは作成されていますが、出力html（firefox->選択されたソースを表示）では、「。style.top」、「。style.left」、「。width」（または.style.width）および'.height'（または.style.height）。

最初のcreatetdivには、-> style = "top：0px; left：0px;。.."があります。secontには->style= "top：0px; .." //'left'属性は表示されなくなり、後続のすべてのdivにはtopまたはleftがありません。

また、createtdivのいずれも幅と高さを取得していません。

これが私のコードで、その非常にシンプルで基本的なものですが、問題を理解することはできません。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Container Pattern Generator</title>
    <style type="text/css">
        body {

        }

        .div_container {
            position:absolute;
            border:solid 1px #000;
        }
    </style>
    <script type="text/javascript">
        function generate() {
            var boxSize = document.getElementById("txt_boxSize").value;
            var width = document.getElementById("txt_width").value;
            var height = document.getElementById("txt_height").value;
            for( var i = 1; i <= height; i++ ) {
                for( var ii = 1; ii <= width; ii++ ) {
                    var newDiv = document.createElement("div");
                    newDiv.setAttribute("id", "div_container_" + i + "_" + ii);
                    newDiv.setAttribute("class", "div_container");
                    newDiv.width = boxSize + "px";
                    newDiv.height = boxSize + "px";
                    newDiv.style.top = ( i - 1 ) * boxSize;
                    newDiv.style.left = ( ii - 1 ) * boxSize;
                    newDiv.style.backgroundColor = getRandColor();
                    document.getElementById("div_main").appendChild( newDiv );
                    alert("ok");
                }
            }
        }

        function getRandColor() {
            var array = new Array( "#FF0000", "#FF8000", "#FF0000", "#01DF01", "#FF0000", "#0404B4", "#FF8000", "#F2F2F2" );
            return array[ randNum( 0, array.length ) ];
        }

        function randNum( min, max ) {
            var num = Math.floor( Math.random() * ( 1 + max - min ) ) + min;
            return num;
        }
    </script>
</head>

<body>
    <p>Width : <input type="text" value="2" id="txt_width" style="width:50px;"/> - Height : <input type="text" value="2" id="txt_height" style="width:50px;"/> - Box Size : <input type="text" value="40" id="txt_boxSize" style="width:50px;"/> - <input type="button" value="Generate" onClick="generate();"/></p>
    <div id="div_main" style="position:absolute; width:100%; height:100%; background-color:#999;">
    </div>
</body>

コートを空白のhtmlファイルにコピーするだけで、その理由を確認できます。

すべてのあなたの助けのためのthx。grエース

編集：

問題は、divが作成されるループ内で100％です。

最初のバージョンでは、div（空白のdiv）の量を単純にハードコーディングしましたが、現在は動的である必要があります。問題が始まります。

4

2 に答える 2

0

述べたように、問題はあなたのループ内にあります。主な問題は、を使用してこれらのスタイルを追加する必要があることですsetAttribute。また、上部と左側の定義には「px」が必要であり、幅と高さは右フックを使用していません。あなたが試した場合、newDiv.style.widthまたはnewDiv.style.width。ただし、に固執することがベストプラクティスだと思いますsetAttribute。この例を参照してください。

このすべて：

newDiv.width = boxSize + "px";
newDiv.height = boxSize + "px";
newDiv.style.top = ( i - 1 ) * boxSize;
newDiv.style.left = ( ii - 1 ) * boxSize;
newDiv.style.backgroundColor = getRandColor();

これになることができます：

var divTop = parseInt((i - 1)*boxSize) + "px;";
var divLeft = parseInt((ii - 1)*boxSize) + "px;";
newDiv.setAttribute("style",
  "top: " + divTop + 
  "left: " + divLeft + 
  "width: " + boxSize + 
  "px;height: " + boxSize + "px;background-color:"+getRandColor()+ ";");
于 2012-10-21T21:13:08.597 に答える
0

無効な属性値を指定しました。これは、newDiv.style.heightとnewDiv.style.widthの代わりにnewDiv.heightとnewDiv.widthを数値以外の値に設定しているためです。値をスタイル属性に入力すれば十分です。これで機能します。

また、コードを少しモジュール化しようとすると、デバッグ/保守が容易になり、他の人が理解しやすくなる可能性があります。

編集

つまり、これを試してみます（リファクタリングなし）：

newDiv.style.width = boxSize + "px";
newDiv.style.height = boxSize + "px";
newDiv.style.top = (( i - 1 ) * boxSize) + "px";
newDiv.style.left = (( ii - 1 ) * boxSize) + "px";
于 2012-10-21T21:15:18.603 に答える