猿问

在网格中排列动态创建的 div

我正在尝试绘制一个蚀刻草图，

用户收到提示，输入他们想要在网格中输入多少个正方形（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>


白猪掌柜的
浏览 128回答 3
3回答

慕尼黑的夜晚无繁华

您可以通过 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>
0

慕侠2389804

您可以使用flexbox、 forbetter browser support和 easy to use。const container = document.getElementById("container");const div = document.createElement("div");const butt = document.getElementById("reset");function changeColor() {&nbsp; event.target.style.backgroundColor = "#434141";}function makeGrid(x) {&nbsp; let num = prompt("how many squares (? by ?)");&nbsp; num = Number(num);&nbsp; const containerW = 600;&nbsp; for (let i = 0; i < num * num; i++) {&nbsp; &nbsp; let dye = document.createElement("div");&nbsp; &nbsp; dye.classList.add("dye");&nbsp; &nbsp; dye.style.flexBasis = `${Math.floor(containerW / num - 4)}px`;&nbsp; &nbsp; dye.style.height = `${Math.floor(containerW / num - 4)}px`;&nbsp; &nbsp; dye.addEventListener("mouseover", changeColor);&nbsp; &nbsp; container.appendChild(dye);&nbsp; }&nbsp; butt.addEventListener("click", () => {&nbsp; &nbsp; document&nbsp; &nbsp; &nbsp; .querySelectorAll(".dye")&nbsp; &nbsp; &nbsp; .forEach(dye => (dye.style.backgroundColor = "grey"));&nbsp; });}makeGrid();#container {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; background-color: #2196F3;&nbsp; justify-content: space-evenly;&nbsp; width: 600px;&nbsp; height: 600px;&nbsp; margin: auto;&nbsp; margin-top: 60px;&nbsp; max-height: 600px;&nbsp; max-width: 600px;}.dye {&nbsp; background-color: grey;&nbsp; border: solid black 1px;}#reset {&nbsp; color: white;&nbsp; background-color: black;&nbsp; margin-left: 500px;&nbsp; margin-top: 20px;&nbsp; outline: none;}.snippet-result-code {&nbsp;height: 700px!important;}<div id="container">&nbsp; &nbsp; </div>&nbsp; &nbsp; <button id="reset">Reset Grid</button>&nbsp; &nbsp; <script src="app.js"></script>
0

梦里花落0921

您不需要每次循环执行时都声明一个事件，您也可以使用.style.backgroundColor更改 BGC 而不是分配新的样式属性function changeColor() {&nbsp; &nbsp; event.target.setAttribute('style', 'background-color: #434141;')}function makeGrid() {&nbsp; &nbsp; x = prompt('how many squares (? by ?)')&nbsp; &nbsp; let z = 0;&nbsp; &nbsp; while (z < x * x) {&nbsp; &nbsp; &nbsp; &nbsp; let dye = document.createElement('div')&nbsp; &nbsp; &nbsp; &nbsp; dye.classList.add('dye')&nbsp; &nbsp; &nbsp; &nbsp; container.appendChild(dye)&nbsp; &nbsp; &nbsp; &nbsp; z++;&nbsp; &nbsp; }&nbsp; &nbsp; let squares = document.getElementById('container').querySelectorAll('.dye');&nbsp; &nbsp; for (j = 0; j < squares.length; j++) {&nbsp; &nbsp; &nbsp; &nbsp; squares[j].addEventListener('mouseover', changeColor)&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById('reset').addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < squares.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // squares[i] = each&nbsp; dye element&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; squares[i].style.backgroundColor = 'gray';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}makeGrid()&nbsp; &nbsp; &nbsp; #container {&nbsp; &nbsp; &nbsp; &nbsp; display: grid;&nbsp; &nbsp; &nbsp; &nbsp; grid-template-rows: auto;&nbsp; &nbsp; &nbsp; &nbsp; grid-template-columns: 1fr 1fr;&nbsp; &nbsp; &nbsp; &nbsp; background-color: #2196f3;&nbsp; &nbsp; &nbsp; &nbsp; width: 600px;&nbsp; &nbsp; &nbsp; &nbsp; height: 600px;&nbsp; &nbsp; &nbsp; &nbsp; margin: auto;&nbsp; &nbsp; &nbsp; &nbsp; margin-top: 60px;&nbsp; &nbsp; &nbsp; &nbsp; max-height: 600px;&nbsp; &nbsp; &nbsp; &nbsp; max-width: 600px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .dye {&nbsp; &nbsp; &nbsp; &nbsp; background-color: grey;&nbsp; &nbsp; &nbsp; &nbsp; border: solid black 1px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; #reset {&nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; background-color: black;&nbsp; &nbsp; &nbsp; &nbsp; margin-left: 500px;&nbsp; &nbsp; &nbsp; &nbsp; margin-top: 20px;&nbsp; &nbsp; &nbsp; &nbsp; outline: none;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; <div id="container"></div>&nbsp; &nbsp; <button id="reset">Reset Grid</button>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答