Как назначить свойство "grid-area" из javaScript? - PullRequest
Новая
       6

Как назначить свойство "grid-area" из javaScript?

0 голосов
/ 03 февраля 2019

Я строю игру в шашки, и все мои квадраты - это HTML-элементы div со свойством id, описывающим их положение (например, «8a», «7b» и т. Д.).Я хотел бы перебрать объект Board в JS, получить значение этого id, а затем присвоить ему значение
gridArea данного квадрата (я уже подготовил gridTemplateArea в CSS-оболочке), потому что я не хочу делать это вручную.Моя программа получает значение идентификатора, но после присвоения ему [квадрат] .style.templateArea ничего не происходит ... значения не существует.

Я даже пытался использовать шаблонлитералы вроде этого ${itsId}, но все равно ничего. 

let boardEl = document.querySelectorAll('.square');
for(let square of boardEl) {
   let itsId = square.id;
   square.style.gridArea = itsId;
}

Когда я console.log gridArea любого квадрата, его значение равно "";Я бы хотел, чтобы он был равен идентификатору квадрата.

1 Ответ

0 голосов
/ 03 февраля 2019

Ваш опубликованный код работает без проблем.

Возможно, у вас есть ошибка в другом месте.

Вы должны попытаться опубликовать пример, который может воспроизвести вашу проблему, в идеале, во фрагменте, напримеродно следующее: 

function change() {


  let boardEl = document.querySelectorAll('.container div');
  for (let square of boardEl) {
    let itsId = square.id;
    square.style.gridArea = itsId;
    console.log (square.style.gridArea);
  }
}
.container {
  display: grid;
  grid-template-areas: "item1 item2";
}

.container div {
  background-color: lightgreen;
  margin: 5px;
}
<div class="container">
  <div id="item2">2</div>
  <div id="item1">1</div>
</div>
<button onclick="change()">change</button>
...