在 JavaScript 中使用 CSS Grid repeat() 声明

Question

我需要了解如何repeat()在 JavaScript 中利用from CSS Grid 来执行以下操作：

let variable = prompt("number");

el.style.setProperty('grid-template-columns: repeat(variable, 1fr)')

执行以下操作也不起作用：

el.style.setProperty('grid-template-columns: repeat(' + variable + ', 1fr)')

我试过在 中连接变量，repeat()但它没有通过。

Answer 1

首先 - 作为一个编辑，不幸的是 - 您的原始代码不起作用，因为：

el.style.setProperty('grid-template-columns: repeat(' + variable + ', 1fr)')

您试图错误地设置属性；CSSStyleDeclaration.setProperty()需要两个或三个逗号分隔的参数；要更新您需要更改使用方法的属性：

el.style.setProperty('grid-template-columns', 'repeat(' + variable + ', 1fr)');

第三个参数是，如文档（链接如下）所示，priority（应该是"!important",undefined或""; 如果没有提供值，则参数被视为空字符串）。

您的方法似乎让人想起尝试更新;的style属性HTMLElement。可以用字符串修改，但使用可用的方法（例如您尝试使用的方法）对于那些可用的浏览器来说几乎肯定要可靠得多。

但是，要使用style属性字符串修改方法：

el.style.setProperty('grid-template-columns: repeat(' + variable + ', 1fr)')

el.style.setProperty('grid-template-columns', 'repeat(' + variable + ', 1fr)');

document.querySelector('#setRepeats').addEventListener('click', function() {
  let grid = document.getElementById('box'),
    repeatNumber = document.getElementById('repeatNumber').value;
  // using HTMLElement.setAttribute() to update the style attribute of the
  // 'grid' node:
  grid.setAttribute('style',
    // updating the attribute with the following concatenated string:
    'grid-template-columns: repeat(' + repeatNumber + ', 1fr)');
});

JS小提琴演示。

然而，另一种方法，使用CSSStyleDeclaration.setProperty() correctly：

#box {
  display: grid;
  grid-template-columns: repeat( var(--repeatNumber, 2), 1fr);
  grid-gap: 5px;
}

.elements:nth-child(odd) {
  background-color: #ccc;
}

.elements:nth-child(even) {
  background-color: #fff;
}

<label for=""><input type="number" id="repeatNumber"></label>
<button id="setRepeats" type="button">Update repeats</button>
<div id="box">
  <div class="elements">1</div>
  <div class="elements">2</div>
  <div class="elements">3</div>
  <div class="elements">4</div>
  <div class="elements">5</div>
  <div class="elements">6</div>
  <div class="elements">7</div>
  <div class="elements">8</div>
  <div class="elements">9</div>
  <div class="elements">10</div>
  <div class="elements">11</div>
  <div class="elements">12</div>
  <div class="elements">13</div>
  <div class="elements">14</div>
  <div class="elements">15</div>
</div>

// here we bind an event-listener, the anonymous function, to the 'click'
// events received on the <button> element (with the id of 'setRepeats'):
document.querySelector('#setRepeats').addEventListener('click', function() {

  // retrieving the element whose property we wish to update:
  let grid = document.getElementById('box'),

    // retrieving the element from which the number is received:
    repeatNumber = document.getElementById('repeatNumber').value;

  // accessing the CSSStyleDeclaration Object of the 'grid'
  // node:
  grid.style

    // updating/setting the 'grid-template-columns'
    // property of the 'grid' node, first identifying
    // the property and then assigning the value
    // (here we use a template literal to concatenate
    // the retrieved variable into the string):
    .setProperty('grid-template-columns', `repeat(${repeatNumber}, 1fr)`);
});

JS小提琴演示。

#box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
}

.elements:nth-child(odd) {
  background-color: #ccc;
}

.elements:nth-child(even) {
  background-color: #fff;
}

<label for=""><input type="number" id="repeatNumber"></label>
<button id="setRepeats" type="button">Update repeats</button>
<div id="box">
  <div class="elements">1</div>
  <div class="elements">2</div>
  <div class="elements">3</div>
  <div class="elements">4</div>
  <div class="elements">5</div>
  <div class="elements">6</div>
  <div class="elements">7</div>
  <div class="elements">8</div>
  <div class="elements">9</div>
  <div class="elements">10</div>
  <div class="elements">11</div>
  <div class="elements">12</div>
  <div class="elements">13</div>
  <div class="elements">14</div>
  <div class="elements">15</div>
</div>

document.querySelector('#setRepeats').addEventListener('click', function() {
  let grid = document.getElementById('box'),
    repeatNumber = document.getElementById('repeatNumber').value;
    
  // here we update the CSS Custom Property identified by its name
  // of '--repeatNumber' (the double-hyphen prefix identifies the
  // property as a custom property), updating its value to that
  // held within the 'repeatNumber' variable:
  grid.style
    .setProperty('--repeatNumber', repeatNumber);
});

JS小提琴演示。

参考：

• CSS：
  • CSS 自定义属性。
• JavaScript：
  • CSSStyleDeclaration.setProperty().
  • 模板文字。