javascript - 无法通过 java 脚本更新 grid-template-areas css 属性

Question

我可以在样式对象中看到属性 grid-template-areas:

document.getElementById("elem-id").style

我尝试通过以下方式设置它:

js直接

document.getElementById("elem-id").style.gridTemplateAreas = "a a b"

j查询

$("#elem-id").css({"grid-template-areas":"a b c"})

但似乎没有任何效果，该属性仍然是空的。

Answer 1

像这样设置模板区域需要嵌套引号。它需要一组引号来表示整个 JavaScript 字符串，并且在其中需要一对引号来表示样式中的每组行单元格。

尚未提供实际的列和行声明。但无论如何，以下其中一项应该起作用，具体取决于您声明的是单行 3 个单元格，还是 3 行，每行 1 个单元格:

document.getElementById("elem-id").style.gridTemplateAreas = "'a a b'";

或者:

document.getElementById("elem-id").style.gridTemplateAreas = "'a' 'a' 'b'";