javascript - 如何使用 javascript 修改网格模板区域

Question

我一直在尝试用 javascript 修改 grid-template-areas。我在 DOM 的 css 属性列表 (elem.style) 中找到了一个名为:gridTemplateAreas 的属性。但我似乎无法用javascript改变它。

如何使用 javascript 修改 grid-template-areas-property？

这是我试过的代码:

window.addEventListener("click", function(){
	let elem= document.getElementById("grid");
	elem.style.gridTemplateAreas = 
  	"z z z"
    "a b c"
    "d e f"
  	console.log("The grid-template area should have been redefined now. The blue block should have move to the top row.");
});

#grid{
  width: 100px;
  height: 100px;
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:  "x x x"
                        "y y z"
                        "y y z";
}
#div1{
  background-color: blue;
  grid-area: z;
}

<h3>Click to activate the code</h3>
<div id="grid">
<div id="div1"></div>
</div>

PS:我使用的是 Google Chrome 自动取款机

Answer 1

你的 elem.style.gridTemplateAreas =
“兹兹兹”
“a b c”
“d e f”

不是一个有效的声明，或者它没有做你想做的事。您要分配值 "z z z""a b c""d e f"。因此，您需要用这样的引号将其括起来:elem.style.gridTemplateAreas = '"z z z""a b c""d e f"';

window.addEventListener("click", function(){
	let elem= document.getElementById("grid");
	elem.style.gridTemplateAreas = '"z z z" "a b c" "d e f"';

  	console.log("The grid-template area should have been redefined now. The blue block should have move to the top row.");
});

#grid{
  width: 100px;
  height: 100px;
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:  "x x x"
                        "y y z"
                        "y y z";
}
#div1{
  background-color: blue;
  grid-area: z;
}

<h3>Click to activate the code</h3>
<div id="grid">
<div id="div1"></div>
</div>