如何从javaScript分配“网格区域”属性？

Question

我正在建立一个跳棋游戏，我所有的方块都是HTML div，其id属性描述了它们的位置（例如'8a'，'7b'等）。我想遍历JS中的board对象，获取此id的值，然后将其分配给给定正方形的gridArea（我已经准备好了包装器css中的gridTemplateArea，因为我不想手动执行。我的程序获取id值，但是将其分配给[square]。style.templateArea之后，什么都没有发生……该值不存在。

我什至尝试使用像这样的模板文字${itsId}，但仍然没有使用。

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

当我console.log的任何正方形的gridArea时，其值为“”;我希望它等于正方形的ID。

Answer 1

我一直在经历同样的麻烦，而解决问题的方法如下：

在js（或DOM）中，gridArea属性不用于为网格项目分配名称。相反，它是>

用作grid-row-start的简写属性，grid-column-start，grid-row-end和grid-column-end属性

。换句话说，适用于正确应用程序的css等效项类似于：grid-area: 1 / 2 / 5 / 6;或grid-area: 2 / 1 / span 2 / span 3;，或者对于grid-area: 2 / 1;格式仅是grid-area: myArea;和NOT

。因此，最好根据列和行号和/或跨度重新安排代码以分配网格区域。可能像：

square.style.gridArea = 'rowStart / columnStart';
参考：https://www.w3schools.com/cssref/pr_grid-area.asp或https://www.w3docs.com/learn-css/grid-area.html