調整網格大小的問題 - 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