Question

我正在尝试创建一个网格，该网格接受用户输入并将其用作行数和列数。换句话说，如果用户输入X，我希望网格有X行和X列，并且是正方形，这意味着这些框的宽度和它们一样高。

我已经使用它来处理JavaScript和CSS网格，但只有在我已经知道行数/列数的情况下才能使用10.请参见下文。

如何创建一个具有相同但有任意行数和列数的网格？

＆＃13;

 #container {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   width: 500px;
   height: 500px;
 }

 div {
   width: 100%;
   height: 100%;
   outline: 1px solid;
   float: left;
 }

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Etch-a-sketch</title>
  </head>

  <body>
    <h1>Etch-a-sketch</h1>
    <button id="start">Start</button>
    <div id="container"></div>
  </body>
  <script>
    let btn = document.getElementById("start")
    btn.addEventListener("click", createGrid)

    function createGrid() {
      let numberOfRows = prompt("How many rows do you want?");
      let i = 0;
      let x = numberOfRows ** 2;

      for (i; i < x; i++) {
        var div = document.createElement("div");
        document.getElementById("container").appendChild(div);
        div.addEventListener("mouseenter", function() {
          this.style.backgroundColor = "red";
        });
      }
    }

  </script>

</html>

＆＃13;

Answer 1

You can use CSS variable for that. and change the variable value using javascript.

let btn = document.getElementById("start")
  btn.addEventListener("click", createGrid)

  function createGrid() {
  var Container = document.getElementById("container");
Container.innerHTML = '';
  
    let numberOfRows = prompt("How many rows do you want?");
    let i = 0;
    let x = numberOfRows * numberOfRows;
    
    document.documentElement.style.setProperty("--columns-row", numberOfRows);
    for (i =  0; i < x ; i++) {
      var div = document.createElement("div");
      document.getElementById("container").appendChild(div);
      div.addEventListener("mouseenter", function () {
      this.style.backgroundColor = "red";
    });
  }
}

:root {
  --columns-row: 2;
}

 
 #container {
      display: grid;
      grid-template-columns: repeat(var(--columns-row), 1fr);
      grid-template-rows: repeat(var(--columns-row), 1fr);
      width: 500px;
      height: 500px;
  }

  div {

     border: 1px solid #000;
  
  }

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Etch-a-sketch</title>
  </head>
  <body>
    <h1>Etch-a-sketch</h1>
    <button id="start">Start</button>
    <div id="container">
    </div>
  </body>

</html>

Answer 2

根据您的需要更改您的CSS。 jsfiddle.net/926pd5oh/9

<h1>Etch-a-sketch</h1>
<button id="start">Start</button>
<div id="container"></div>
<style>
  #container>div {
    width: 100%;
    height: 10px;
    margin: 2px;
  }

  #container>div>div {
    float: left;
    height: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 25px;
  }
</style>
<script>
  let btn = document.getElementById("start")
  btn.addEventListener("click", createGrid);

  function createGrid() {
    let numberOfRows = prompt("How many rows do you want?");
    document.getElementById("container").innerHTML = "";
    console.log(numberOfRows);
    for (let i = 0; i < numberOfRows; i++) {
      var divRow = document.createElement("div");
      document.getElementById("container").appendChild(divRow);
      for (let y = 0; y < numberOfRows; y++) {
        let divCol = document.createElement("div");
        divCol.addEventListener("mouseenter", function () {
          this.style.backgroundColor = "red";
        });
        divRow.appendChild(divCol);
      }

    }
  }
</script>

Answer 3

我最终使用了不同的工具：container.style.gridTemplateColumns和container.style.gridTemplateRows来影响容器的行数和列数。这允许我不使用上面的：root函数。请参阅https://www.w3schools.com/cssref/pr_grid-template-columns.asp

上的JavaScript语法

matplotlib

如何使用偶数行和列创建动态网格？

3 个答案: