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

【问题标题】：How to assign "grid-area" property from javaScript?如何从 javaScript 分配“网格区域”属性？
【发布时间】：2019-02-03 00:12:02
【问题描述】：

我正在构建一个跳棋游戏，我的所有方块都是 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。

【问题讨论】：

boardEl 是否包含任何元素？（你能显示你的 HTML 吗？）如果它是空的，for 循环不会做任何事情。

标签： javascript css css-grid grid-layout

【解决方案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; 和 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

【讨论】：

【解决方案2】：

您需要一个 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;
}

【讨论】：