我正在尝试绘制一个蚀刻草图，用户收到提示，输入他们想要在网格中输入多少个正方形（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条经验 获得超5个赞
您不需要每次循环执行时都声明一个事件，
您也可以使用.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 关注
- 67 浏览
添加回答
举报
0/150
提交
取消