我正在嘗試繪制一個蝕刻草圖，用戶收到提示，輸入他們想要在網格中輸入多少個正方形（div），但我無法將這些 div 組織到網格中。這是我的代碼（請注意，我知道“grid-template-rows”和“grid-template-columns”不正確，這就是我要做的）const container = document.getElementById('container')const div = document.createElement('div')const butt = document.getElementById('reset')function changeColor() { event.target.setAttribute('style', 'background-color: #434141;')}function makeGrid(x) { x = prompt('how many squares (? by ?)') let i = 0; while (i < x * x) { let dye = document.createElement('div') dye.classList.add('dye') container.appendChild(dye) i++; dye.addEventListener('mouseover', changeColor) butt.addEventListener('click', () => { dye.setAttribute('style', 'background-color: grey;') }) }}makeGrid()#container { display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr; background-color: #2196F3; width: 600px; height: 600px; margin: auto; margin-top: 60px; max-height: 600px; max-width: 600px; }.dye { background-color: grey; border: solid black 1px;}#reset{ color: white; background-color: black; margin-left: 500px; margin-top: 20px; outline: none;}<!DOCTYPE html><html><head> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="container"> </div><button id="reset">Reset Grid</button> <script src="index.js"></script></body></html>
3 回答
慕尼黑的夜晚無繁華
TA貢獻1864條經驗 獲得超6個贊
您可以通過 JavaScript 更改網格模板列，以使用重復值動態添加列數。
document.getElementById('container').style.gridTemplateColumns?=?`repeat(${x},?1fr)`const container = document.getElementById('container')
const div = document.createElement('div')
const butt = document.getElementById('reset')
function changeColor() {
? ? event.target.setAttribute('style', 'background-color: #434141;')
}
function makeGrid(x) {
? ? x = prompt('how many squares (? by ?)')
? ? let i = 0;
? ??
? ? document.getElementById('container').style.gridTemplateColumns = `repeat(${x}, 1fr)`?
? ? while (i < x * x) {
? ? ? ? let dye = document.createElement('div')
? ? ? ? dye.classList.add('dye')
? ? ? ? container.appendChild(dye)
? ? ? ? i++;
? ? ? ? dye.addEventListener('mouseover', changeColor)
? ? ? ? butt.addEventListener('click', () => {
? ? ? ? ? ? dye.setAttribute('style', 'background-color: grey;')
? ? ? ? })
? ? }
}
makeGrid()
#container {
? ? display: grid;
? ? ?grid-template-rows: auto;
? ? ?grid-template-columns: 1fr 1fr;
? ? background-color: #2196F3;
? ? width: 600px;
? ? height: 600px;
? ? margin: auto;
? ? margin-top: 60px;
? ? max-height: 600px;
? ? max-width: 600px;
? ?
}
.dye {
? ? background-color: grey;
? ? border: solid black 1px;
}
#reset{
? ? color: white;
? ? background-color: black;
? ? margin-left: 500px;
? ? margin-top: 20px;
? ? outline: none;
}
<!DOCTYPE html>
<html>
<head>
? ? <link rel="stylesheet" href="style.css">
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? <div id="container">
? ? ? ??
? ? </div>
<button id="reset">Reset Grid</button>
? ? <script src="index.js"></script>
</body>
</html>
慕俠2389804
TA貢獻1719條經驗 獲得超6個贊
您可以使用flexbox、 forbetter browser support和 easy to use。
const container = document.getElementById("container");
const div = document.createElement("div");
const butt = document.getElementById("reset");
function changeColor() {
event.target.style.backgroundColor = "#434141";
}
function makeGrid(x) {
let num = prompt("how many squares (? by ?)");
num = Number(num);
const containerW = 600;
for (let i = 0; i < num * num; i++) {
let dye = document.createElement("div");
dye.classList.add("dye");
dye.style.flexBasis = `${Math.floor(containerW / num - 4)}px`;
dye.style.height = `${Math.floor(containerW / num - 4)}px`;
dye.addEventListener("mouseover", changeColor);
container.appendChild(dye);
}
butt.addEventListener("click", () => {
document
.querySelectorAll(".dye")
.forEach(dye => (dye.style.backgroundColor = "grey"));
});
}
makeGrid();
#container {
display: flex;
flex-wrap: wrap;
background-color: #2196F3;
justify-content: space-evenly;
width: 600px;
height: 600px;
margin: auto;
margin-top: 60px;
max-height: 600px;
max-width: 600px;
}
.dye {
background-color: grey;
border: solid black 1px;
}
#reset {
color: white;
background-color: black;
margin-left: 500px;
margin-top: 20px;
outline: none;
}
.snippet-result-code {
height: 700px!important;
}
<div id="container">
</div>
<button id="reset">Reset Grid</button>
<script src="app.js"></script>
夢里花落0921
TA貢獻1772條經驗 獲得超6個贊
您不需要每次循環執行時都聲明一個事件，
您也可以使用.style.backgroundColor更改 BGC 而不是分配新的樣式屬性
function changeColor() {
event.target.setAttribute('style', 'background-color: #434141;')
}
function makeGrid() {
x = prompt('how many squares (? by ?)')
let z = 0;
while (z < x * x) {
let dye = document.createElement('div')
dye.classList.add('dye')
container.appendChild(dye)
z++;
}
let squares = document.getElementById('container').querySelectorAll('.dye');
for (j = 0; j < squares.length; j++) {
squares[j].addEventListener('mouseover', changeColor)
}
document.getElementById('reset').addEventListener('click', () => {
for (i = 0; i < squares.length; i++) {
// squares[i] = each dye element
squares[i].style.backgroundColor = 'gray';
}
});
}
makeGrid()
#container {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
background-color: #2196f3;
width: 600px;
height: 600px;
margin: auto;
margin-top: 60px;
max-height: 600px;
max-width: 600px;
}
.dye {
background-color: grey;
border: solid black 1px;
}
#reset {
color: white;
background-color: black;
margin-left: 500px;
margin-top: 20px;
outline: none;
}
<div id="container"></div>
<button id="reset">Reset Grid</button>
- 3 回答
- 0 關注
- 190 瀏覽
添加回答
舉報
0/150
提交
取消