如何在Javascript中更改DIV相对于其内部对象的大小？

我创建了一个根据用户插入的行数和列数创建的动态表。这不是一个TABLE对象，只是两个for循环。列/行数越高，DIV越高，因为如果我不增加DIV，行会缩小并且不能正确创建。所以基本上，我如何改变DIV相对于它里面的对象的大小？当然，我正在讨论JavaScript的答案。如何在Javascript中更改DIV相对于其内部对象的大小？

这是JavaScript + HTML + CSS代码：我想改变mainDiv和boardDiv尺寸继行和列（这实际上是一个部落，我创建）

var board = document.getElementById('boardDiv'); 
 
    var sizePercent; 
 
    var width; 
 
    var height; 
 
    var rowDiv; 
 
    var loadBoard = function() { 
 

 
      document.getElementById('boardDiv').innerHTML = ""; 
 
      createBoard(); 
 
    } 
 
    //for the first time the user open the page 
 
    loadBoard(); 
 

 
    function createBoard() { 
 
     width = document.getElementById('width').value; 
 
     height = document.getElementById('height').value; 
 

 
     for (var y = 0; y < height; y++) { 
 
      rowDiv = document.createElement('div'); 
 
      for (var x = 0; x < width; x++) { 
 
       var button = document.createElement('button'); 
 
       sizePercent = 100/30; //It's a random ratio for every square - do not take it for granted 
 
        button.style.width = sizePercent + '%'; 
 
        button.style.height = sizePercent + '%'; 
 
        rowDiv.appendChild(button); 
 
       
 
      } 
 
      board.appendChild(rowDiv); 
 
     } 
 
    }

#mainDiv { 
 
     width : 500px; 
 
     height : 550px; 
 
     border : solid 5px rgb(112, 146, 190); 
 
     background-color: rgb(153, 178, 208); 
 
     border-radius: 5px; 
 
    } 
 
    #boardDiv { 
 
     width : 100%; 
 
     height :100%; 
 
    } 
 
    button { 
 
     background: linear-gradient(white, rgb(72, 109, 159)); 
 
    }

<html> 
 
<head> 
 

 
</head> 
 
<body> 
 
<div id='mainDiv'> 
 
    <div id='boardDiv'> 
 

 
    </div> 
 
    <div> 
 
    <form> 
 

 
     Width: 
 
     <input type="text" name="width" value="10" id="width"> 
 

 
     Height: 
 
     <input type="text" name="hight" value="10" id="height"> 
 

 
     Mines: 
 
     <input type="text" name="mines" value="7" id="mines"> 
 

 
     <input type="button" value="New Game" onclick="loadBoard()"> 
 
    </form> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

感谢的提前大家

来源

2017-05-04 user2828271

当然我们需要看你的代码 –

我编辑ny话题并添加代码，谢谢你！ – user2828271

说somone想要宽度为200个单元格，按钮宽度为15px，这将意味着div需要是3000px长（15 * 200）。因此，要调整我们将使用以下命令格：

documnet.getElementById("mainDiv").style.width = button.style.width * width;

然后我们会做同样的高度，说有人为希望台具有50的高度和按钮都是为5px高，这意味着div将需要250px高。我们将通过使用以下命令来实现此目的：

documnet.getElementById("mainDiv").style.width = button.style.height * height;

这将使div具有所需的确切大小。

来源

2018-01-19 22:29:34 DMVerfurth

如何在Javascript中更改DIV相对于其内部对象的大小？

回答

相关问题