如何在css中使用javascript变量？

Question

我试着用Javascript生成一个网格。用户应该输入一个数字来确定网格的大小。如果我使用插入到javascript代码和css中的特定数字来运行代码，它就可以正常工作，但是一旦我用变量更改了数字，并且只使用用户输入，它就会给我一个奇怪的网格。

这是密码

​

    const container = document.querySelector(".container");

    //CREATE GRID
    function grid (size) {
        size = prompt("How many squares wide do you want your grid to be?");
        container.style.gridTemplateColumns = "repeat(7, 1ft)";
        for (let i = 0; i < size; i++) {
            for (let j = 0; j < size; j++) {
                const square = document.createElement("div");
                square.classList.add("square");
                square.style = "background-color: white; border: 1px solid black";
                container.appendChild(square);
            }
        }
    }
        
    grid(7);

    .container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 500px;
    height: 500px;
    border: 2px dotted lightgray;

    }

<main class="container"/>

​

在这种情况下，如果我选择7作为用户输入，它就能工作，但是如果我用"size“替换7，这是它没有的变量

Answer 1

这里有一个与您的尝试非常相似的示例解决方案。注意，我在代码片段中将错误ft更正为fr。这使用回勾字符串(模板文本)进行插值，但也可以使用+将字符串连接在一起。

​

const container = document.querySelector(".container");

//CREATE GRID
function grid(size) {
  container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
  for (let row = 0; row < size; row++) {
    for (let column = 0; column < size; column++) {
      const square = document.createElement("div");
      square.classList.add("square");
      container.appendChild(square);
    }
  }
}

size = prompt("How many squares wide do you want your grid to be?");
grid(size);

.container {
  display: grid;
  width: 500px;
  height: 500px;
  border: 2px dotted lightgray;
}

.container>.square {
  background-color: white;
  border: 1px solid black
}

<main class="container"></main>

​

下面是一个使用css变量的示例：

​

const container = document.querySelector(".container");

//CREATE GRID
function grid(size) {
  container.style.setProperty('--grid-size', size);
  for (let row = 0; row < size; row++) {
    for (let column = 0; column < size; column++) {
      const square = document.createElement("div");
      square.classList.add("square");
      container.appendChild(square);
    }
  }
}

size = prompt("How many squares wide do you want your grid to be?");
grid(size);

.container {
  display: grid;
  width: 500px;
  height: 500px;
  border: 2px dotted lightgray;
  grid-template-columns: repeat(var(--grid-size), 1fr);
}

.container>.square {
  background-color: white;
  border: 1px solid black
}

<main class="container"></main>

​

Answer 2

您可以使用从提示模式更新的var size：

下面的片段和可能的使用：https://codepen.io/gc-nomade/pen/xxZxwoM

​

const container = document.querySelector(".container");

//CREATE GRID
function grid(size) {
  size = prompt("How many squares wide do you want your grid to be?");
  container.style.gridTemplateColumns = "repeat(" + size + ", 1fr)";
  for (let i = 0; i < size; i++) { 
      const square = document.createElement("div");
      square.classList.add("square");
      square.style = "background-color: white; border: 1px solid black";
      square.textContent = i;
      container.appendChild(square);
    
  }
}

grid(7);

.container {  
display: grid; 
width: 500px; 
}

<div class="container">  </div>

​

这里是一个带有css变量的https://codepen.io/gc-nomade/pen/zYrYrOM版本。