未調(diào)整大小以適應(yīng)空間的元素
我正在做一個(gè)蝕刻草圖，由x個(gè)格子組成。網(wǎng)格的大小應(yīng)該總是保持不變，而單元格的大小應(yīng)該調(diào)整，以便所有單元格都適合指定的網(wǎng)格。
當(dāng)我嘗試運(yùn)行我的代碼時(shí)，單元格網(wǎng)格的大小總是變化，而單元格的大小是恒定的。此外，網(wǎng)格會(huì)增長(zhǎng)到與按鈕等其他元素重疊。
這是javascript(我希望網(wǎng)格能夠增長(zhǎng)以適應(yīng)。電路板元件):
const board = document.querySelector(".board");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");
let gridNumber = prompt("How many cells wide would you like your grid to be?");
if(gridNumber>50){
alert("Sorry, this grid is too big");
gridNumber = 20;
}
function makeRows(rowNum){
for(let i=0; i<rowNum; i++){
let row = document.createElement("div");
board.appendChild(row).className = "gridRow";
}
}
function makeCells(cellNum){
for(let i=0; i<rows.length; i++){
for(let j=0; j<cellNum; j++){
let cell = document.createElement("div");
cell.addEventListener("mouseover", () => {
cell.classList.add('hover');
});
rows[i].appendChild(cell).className = "cell";
}
}
}
makeRows(gridNumber);
makeCells(gridNumber);
document.getElementById("reset").onclick = function() {
for(let i=0; i<cells.length; i++)
cells[i].classList.remove('hover');
}這是CSS:
body{
display: flex;
flex-direction: row;
justify-content: center;
}
.cell{
border: 1px solid black;
width: 10px;
height: 10px;
flex: 1;
background-color: white;
}
#container{
display: flex;
flex-direction: column;
min-width: 500px;
min-height: auto;
align-items: center;
}
.board{
display: flex;
flex: wrap;
justify-content: center;
flex-direction: row;
background-color: black;
margin: 20px;
width: 500px;
height: 500px;
}
.hover{
background-color: green;
}HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="etchsketch.js" defer></script>
<link rel="stylesheet" href="etchsketch.css">
</head>
<body>
<div id="container">
<div class = "title"><h1>Etch-A-Sketch</h1></div>
<div class = board></div>
<div class = buttons>
<button id = "reset">Reset</button>
</div>
</div>
</body>
</html>雖然我意識(shí)到使用CSS grid可以更容易地完成這個(gè)項(xiàng)目，但我想知道是否有一種方法可以使用javascript中的單元格來(lái)完成它。
若要在網(wǎng)格大小保持不變的同時(shí)更改單元格網(wǎng)格大小，可以修改。單元格類(lèi)使用寬度和高度屬性的百分比值，這將導(dǎo)致單元格根據(jù)網(wǎng)格的大小按比例調(diào)整大小。您還可以添加一個(gè)max-width屬性，以防止單元格變得過(guò)大并與頁(yè)面上的其他元素重疊。
這里有一個(gè)更新的CSS。細(xì)胞類(lèi)別:
.cell{
border: 1px solid black;
width: calc(100% / var(--grid-size));
height: calc(100% / var(--grid-size));
max-width: 50px;
flex: 1;
background-color: white;
}在這個(gè)CSS中，我們使用calc()函數(shù)將每個(gè)單元格的寬度和高度設(shè)置為基于網(wǎng)格大小的百分比值(我們將使用CSS變量來(lái)設(shè)置)。我們還添加了一個(gè)max-width屬性來(lái)限制單元格的大小。
若要使用CSS變量設(shè)置網(wǎng)格的大小，可以修改。board類(lèi)包含- grid-size變量，我們將使用它來(lái)設(shè)置網(wǎng)格中的行數(shù)和列數(shù)。創(chuàng)建網(wǎng)格時(shí)，可以在JavaScript中設(shè)置這個(gè)變量的值。
這里有一個(gè)更新的CSS。董事會(huì)級(jí)別:
.board{
display: flex;
flex-wrap;
justify-content: center;
flex-direction: row;
background-color: black;
margin: 20px;
width: 500px;
height: 500px;
--grid-size: 20;
}在這個(gè)CSS中，我們添加了- grid-size變量來(lái)設(shè)置網(wǎng)格中的行數(shù)和列數(shù)。我們還為此變量設(shè)置了默認(rèn)值20。
要在JavaScript中更新- grid-size變量的值，可以將以下代碼添加到makeRows和makeCells函數(shù)中:
function makeRows(rowNum){
board.style.setProperty('--grid-size', rowNum);
for(let i=0; i<rowNum; i++){
let row = document.createElement("div");
board.appendChild(row).className = "gridRow";
}
}
function makeCells(cellNum){
board.style.setProperty('--grid-size', cellNum);
for(let i=0; i<rows.length; i++){
for(let j=0; j<cellNum; j++){
let cell = document.createElement("div");
cell.addEventListener("mouseover", () => {
cell.classList.add('hover');
});
rows[i].appendChild(cell).className = "cell";
}
}
}在這些函數(shù)中，我們使用setProperty()方法來(lái)更新。board元素，這將導(dǎo)致單元格的大小根據(jù)網(wǎng)格中的行數(shù)和列數(shù)進(jìn)行更新。
總的來(lái)說(shuō)，這些更改應(yīng)該允許您創(chuàng)建一個(gè)動(dòng)態(tài)網(wǎng)格，其中的單元格可以根據(jù)網(wǎng)格的大小按比例調(diào)整大小，同時(shí)保持網(wǎng)格的整體大小不變。