时间戳

首页 > 解决方案 > 在 JavaScript 中使用 CSS Grid repeat() 声明

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

问题描述

我需要了解如何利用repeat()JavaScript 中的 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()但它没有通过。

标签： javascriptcsscss-grid

解决方案

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

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属性字符串修改方法：

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

JS 小提琴演示。

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

JS 小提琴演示。

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

JS 小提琴演示。

参考：

推荐阅读