Question

我已经创建了一个创建正方形网格的函数。当我手动将CSS中的高度和宽度设置为30px时，一切都适用于480xx x 480px容器中的16x16网格。我的想法是在同一空间中拟合其他数量的正方形，因此我必须按变量设置高度和宽度。

function makeGrid() {
var $grid = $('#container');
var height = 480 / numOfSides;
var width = 480 / numOfSides;
  $('.gridSquare').css({'height':height+'px','width':width+'px'});
  for (i = 0; i < numOfSides; i++) {
    var row = '<div>';
      for (j = 0; j < numOfSides; j++)
        row += '<div class="gridSquare"></div>';
        row += '</div>';
        $grid.append(row);
  }
}

然而，我现在使用的代码生成一个正方形。我在使用这些变量和css方法时遇到了什么错误？

Answer 1

你需要在循环结束时在gridSection上设置css，否则，它不会应用到最后一行。

var numOfSides = 5;

function makeGrid() {
  var $grid = $('#container');
  var height = 480 / (numOfSides);
  var width = 480 / (numOfSides);

  for (i = 0; i < numOfSides; i++) {
      var row = '<div>';

      for (j = 0; j < numOfSides; j++) {
        row += '<div class="gridSquare"></div>';

      }
      row += '</div>';
      $grid.append(row);
  }
  $('.gridSquare').css({'height':height+'px','width':width+'px'});
}

makeGrid();

CodePen：http://codepen.io/nobrien/pen/bpLGXK

Javascript使用变量设置CSS

1 个答案: