如何在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相對於其內部對象的大小？

回答

相關問題