调整网格大小的问题 - JavaScript CSS HTML，Odin 项目的 etch-a-sketch

Question

我想问一下如何让我的网格始终保持不变（一个大正方形，里面只有不同数量的小正方形）。 您可以通过在提示中输入数字来更改小方块的数量。 例如，将其从默认的 16 更改为 64 会以一种可怕的方式调整其大小。 我认为它可能与 CSS 相关，但我在这里迷路了。 请参阅此 JSFiddle 并指导我。

关联。

<script async src="//jsfiddle.net/MicSparrow/0q8ycvgr/embed/"></script>

在此先感谢您的帮助。

Answer 1

如果你想保持盒子的宽度和高度现在： 25px ，你可以考虑任何方法来防止行断线，

例如：通过添加white-space: pre; 到.row

在这种方法中，内容可能会超过文档宽度，并且页面可以水平滚动

如果您希望根据大小动态设置宽度和高度，您可以更新代码，因此在选择网格大小后，您需要通过除以容器宽度/网格大小来计算宽度/高度值

Answer 2

第一个问题是 HTML 不包括边框作为框的整体宽度和高度。 因此，要在 CSS 中覆盖它，我们可以进行box-sizing: border-box参见示例。
另一个小的 CSS 技巧是边框在网格中间是双的，在外面是单的。 为了解决这个问题，我们可以为所有的盒子添加border-left和border-bottom，并在每行的第一行添加border-top，在最后一个盒子添加border-right
现在，一切就绪，让我们在 Javascript 中将最大宽度（如果您想改变高度，则将高度）设置为 400。
我们可以根据容器中盒子的数量来设置盒子的宽度和高度，这样总共是 400 个。

祝你好运

 const gridContainer = document.querySelector("#grid-container"); const magicButton = document.querySelector("#magic-button"); const gameReset = document.querySelector("#game-reset"); const maxWidth = 400; window.addEventListener('load', makeBlocks); let size = 16; function makeBlocks() { for (let i = 0; i < size; i++) { let row = document.createElement('div'); row.className = "row"; for (let j = 0; j < size; j++) { let box = document.createElement('div'); box.className = "box"; row.appendChild(box); } document.getElementById('grid-container').appendChild(row); gridContainer.addEventListener("mouseover", changeColor); var boxes = document.getElementsByClassName("box"); for (k = 0; k < boxes.length; k++) { boxes[k].style.width = maxWidth / size + "px"; boxes[k].style.height = maxWidth / size + "px"; } } } function changeColor(e) { const Color1 = Math.floor(Math.random() * 256); const Color2 = Math.floor(Math.random() * 256); const Color3 = Math.floor(Math.random() * 256); e.target.style.backgroundColor = `rgb(${Color1}, ${Color2}, ${Color3})`; } magicButton.addEventListener("click", changeSize); function changeSize() { let newSize = prompt("Enter desired grid size from 1 to 100"); let desiredValue = parseInt(newSize); if (desiredValue > 1 && desiredValue <= 100) { size = newSize; clearGrid(); makeBlocks(); } else { alert("Enter a digit from 1-100 range;"). } } function clearGrid() { const gridArray = Array.from(gridContainer;childNodes). gridArray.forEach((element) => { gridContainer;removeChild(element); }). } function resetGame() { gameReset,addEventListener('click'. () => location;reload()); } resetGame();

 body { text-align: center; } h1 { font-family: arial, monospace; font-size: 70px; color: black; } button { background-color: #99e6ff; border: solid black; border-width: 1px; color: #000000; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } #grid-container { display: inline-block; }.box { background: #ffffff; border-left: #000000 1px solid; border-bottom: #000000 1px solid; display: inline-block; box-sizing: border-box; }.row { display: block; width: 100%; font-size: 0; }.row:first-child { border-top: #000000 1px solid; }.row.box:last-child { border-right: #000000 1px solid; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Etch-a-sketch</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Etch-a-sketch</h1> </header> <div class="main-container"> <div class="magic"> <button id="magic-button">Change size</button> <button id="game-reset">Reset game</button> </div> <br> <div id="grid-container"></div> </div> <script src="script.js"></script> </body> </html>

调整网格大小的问题 - JavaScript CSS HTML，Odin 项目的 etch-a-sketch

问题描述

2 个解决方案

解决方案1
1 2021-01-25 19:18:27

解决方案2
0 2021-01-25 20:14:48

调整网格大小的问题 - JavaScript CSS HTML，Odin 项目的 etch-a-sketch

问题描述

2 个解决方案

解决方案1 1 2021-01-25 19:18:27

解决方案2 0 2021-01-25 20:14:48

解决方案1
1 2021-01-25 19:18:27

解决方案2
0 2021-01-25 20:14:48