如何在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);

和这里的CSS

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

}

在这种情况下，如果我选择7作为用户输入，它将起作用，但是如果我将7替换为“ size”，那么它就不会起作用

Answer 1

您可以使用从提示模式中更新的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的版本

Answer 2

这是与您的尝试非常相似的示例解决方案。请注意，我已将代码段中的错别字ft纠正为fr。这使用back-tick strings (template literals)进行插值，但是您也可以使用+将字符串连接在一起。

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

//CREATE GRID
function grid(size) {
  container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
  for (let i = 0; i < size; i++) {
    for (let j = 0; j < size; j++) {
      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>