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

我创建了一个动态表，该表是根据行数和用户插入的列创建的。这不是表对象，而是两个用于循环的对象。列/行的数量越高，DIV的数量越高，因为如果我不增加DIV，则线将收缩并且无法正确创建。因此，基本上，如何更改DIV相对于内部对象的大小？当然，我说的是对JavaScript的答案。

这是JavaScript HTML CSS代码：我想在行和列之后更改saindiv和董事会大小(这实际上是我创建的部落(

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>

谢谢大家

说Somone想要200个单元格的宽度，按钮宽度为15px，这意味着DIV需要长3000px(15 * 200(。因此，要调整DIV大小，我们将使用以下命令：

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

然后，我们将为高度做同样的事情，说Somone希望桌子的高度为50，按钮高5px，这意味着DIV将需要高250px。我们将通过使用以下命令来实现这一目标：

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

这将使Div确切所需的大小。

相关内容

最新更新

热门标签：