Question

我需要了解如何利用JavaScript中CSS网格中的repeat()来执行以下操作：

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的{{1}}属性；可以使用字符串进行修改，但是使用可用的方法（例如您尝试使用的方法）对于可以使用这些方法的浏览器几乎肯定要可靠得多。

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

style

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)');
});

#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;
}

JS Fiddle demo。

但是，另一种方法是使用<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>：

CSSStyleDeclaration.setProperty() correctly

// 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)`);
});

#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;
}

JS Fiddle demo。

<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);
});

#box {
  display: grid;
  /* taking advantage of the CSS var() function's ability to use a
     default value should the supplied variable not resolve (or
     resolve to an invalid value); here 2 is the default to be used
     in the event that the CSS custom property '--repeatNumber'
     is unavilable or invalid. As the property isn't defined on
     page-load the page first loads with the default value of 2: */
  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;
}

JS Fiddle demo。

参考文献：

CSS：
- CSS custom properties。
JavaScript：
- CSSStyleDeclaration.setProperty()。
- Template literals。

在JavaScript中使用CSS Grid repeat（）声明

1 个答案: