Question

我正在构建一个跳棋游戏，我所有的方块都是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网格面积为任何正方形时，其值为“”；我希望它等于正方形的ID。

Answer 1

您发布的代码可以正常工作。

可能其他地方有错误。

您应该尝试发布一个示例，该示例可以重现您的问题，最好是在一个摘要中，例如以下示例：

List<?> emptyList = new ArrayList<>();
List<?> processedList = emptyList.stream().collect(Collectors.toList());

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

Answer 2

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

在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

Answer 3

您需要一个 CSS规则用于每个木板位置以设置网格区域：

[id="A1"] {
    grid-area: A1;
}

我使用了id属性，而不是使用at，因为它更有意义（语义HTML）
在国际象棋原型中：https://chessmeister.github.io/
展示W3C标准自定义元素在React上的强大功能。

chessmeister-board-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(8, 12.5%);
    grid-template-rows: repeat(8, 12.5%);
    grid-template-areas:
        "A8 B8 C8 D8 E8 F8 G8 H8"
        "A7 B7 C7 D7 E7 F7 G7 H7"
        "A6 B6 C6 D6 E6 F6 G6 H6"
        "A5 B5 C5 D5 E5 F5 G5 H5"
        "A4 B4 C4 D4 E4 F4 G4 H4"
        "A3 B3 C3 D3 E3 F3 G3 H3"
        "A2 B2 C2 D2 E2 F2 G2 H2"
        "A1 B1 C1 D1 E1 F1 G1 H1";
    grid-auto-flow: row;
    user-select: none;
}

，然后使用（64个CSS规则）定位片段：

[at="A1"] {
    grid-area: A1;
}
.
.
.
[at="H8"] {
    grid-area: H8;
}

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

3 个答案: