使用變量設置CSS的Javascript

-2

我已經創建了一個函數來創建一個正方形網格。當我手動將CSS中的高度和寬度設置爲30px時，所有內容都適用於480x480px容器中的16x16網格。這個想法是在同一個空間中放入其他數量的正方形，所以我必須通過變量來設置高度和寬度。使用變量設置CSS的Javascript

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方法？

來源

2016-04-09 John Bell

您當前的代碼創建在每一行的開始一個新的DOV，然後創建一個新的實例，關閉第一個，然後可能會創建一個新的div，然後關閉第一個（這不會起作用，因爲它已經關閉） –

'numOfSides'是什麼？請包括[mcve]。 –

您需要在循環結束時在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

來源

2016-04-10 00:06:03 NOBrien

謝謝，修好了！ –

使用變量設置CSS的Javascript

回答

相關問題