0

ユーザー入力からページにピラミッドのような構造を作成したいのですが、構造は次のように表示されます。 ピラミッド

JS でループして構造を表示しようとしましたが、ユーザー入力に従って JS ループで css プロパティを変更できません。このページのコードは次のとおりです。

var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';


for (var i = 0; i < intLevels; i++) {

  strBlocksHTML += '<div class="buildingBlock"></div>';

  strBlocksHTML += '<div></div>'; // Line break after each row
}

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px 5px;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}
<div id="container"></div>

<div>出力はタワーとして表示され、各要素間のスペースも削除したいと考えています。jqueryを使用するか、他の方法でこれを変更するにはどうすればよいですか? 上の画像は、私が望む望ましい出力です。

4

4 に答える 4

1

最初の strBlocksHTML 行を

strBlocksHTML += '<div class="buildingBlock" style="width: ' + Number(20 + 40 * i) + 'px"></div>';

できます。

于 2013-10-02T10:00:13.857 に答える
1

作成された各 div のスタイル属性を使用して幅を設定し、動的に計算することができます。次のように、ループを逆方向に実行するように変更しました。

for(var i=intLevels; i>0; --i) {
    strBlocksHTML += '<div class="buildingBlock" style="width:'+(250-i*20)+'px"></div>';
}

値 (i*20 が差し引かれる幅 250px) を適切に変更します。必要なピラミッド レベルの数に基づいて動的に計算します。

また、改行用の空の div は必要ありません。div を display:block のままにし、マージンを auto に設定して中央に配置します。

var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';

for (var i = intLevels; i > 0; --i) {

  strBlocksHTML += '<div class="buildingBlock" style="width:' + (250 - i * 20) + 'px"></div>';
}

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  height: 20px;
  margin: auto;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}
<div id="container"></div>

于 2013-10-02T10:00:15.840 に答える
1

あなたはこのようなことをする必要があります

for( var i=0; i<intLevels; i++ ){
    var wd = 20 * i;
    strBlocksHTML += '<div class="buildingBlock" style="width:'+wd+'px"></div>';

    strBlocksHTML += '<div></div>'; // Line break after each row
}


var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';


for (var i = 0; i < intLevels; i++) {
  var wd = 20 * i;
  strBlocksHTML += '<div class="buildingBlock" style="width:' + wd + 'px;"></div>';

  strBlocksHTML += '<div></div>'; // Line break after each row
}

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px 5px;
  background-color: #eee;
  border: 2px solid #ccc;
  margin-top: -20px;
}

#container {
  text-align: center;
}
<div id="container"></div>

cssを使用してこれらをより近くに配置できます

于 2013-10-02T10:01:40.117 に答える
1 

var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';


for (var i = 0; i < intLevels; i++) {

  strBlocksHTML += '<div class="buildingBlock" style="width:' + (10 * i) + 'px"></div>';

  //strBlocksHTML += '<div></div>'; // Line break after each row
}

objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}
<div id="container"></div>

于 2013-10-02T10:02:59.103 に答える