javascript - 如何从 javaScript 分配 "grid-area"属性？

Question

我正在构建一个西洋跳棋游戏，我所有的方 block 都是 HTML div，带有描述它们位置的 id 属性(例如“8a”、“7b”等)。我想在JS中遍历board对象，得到这个id的值，然后赋给
的值 给定正方形的 gridArea(我已经准备好了 gridTemplateArea 在包装器的 css 中)，因为我不想手动完成。我的程序获取了 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 属性不用于为网格项分配名称。相反，它是

used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties

.换句话说，适用于正确应用程序的 css 等效项如下:grid-area: 1/2/5/6; 或 grid-area: 2/1/span 2/span 3; 或只是 grid-area: 2/1; 和 NOT 用于 grid-area: myArea; 格式。因此，最好重新排列代码以根据列号和行号和/或跨度分配网格区域。可能像:

square.style.gridArea = 'rowStart / columnStart';

引用:https://www.w3schools.com/cssref/pr_grid-area.asp或 https://www.w3docs.com/learn-css/grid-area.html