如何使用JavaScript修改网格模板区域 [英] How to modify grid-template-areas with javascript

问题描述

我一直在尝试使用javascript修改grid-template-areas.我在DOM的css属性列表(elem.style)中找到了一个属性，称为:gridTemplateAreas.但是我似乎无法使用javascript进行更改.

I have been trying to modify grid-template-areas with javascript. I found a property in the css properties list (elem.style) in the DOM called: gridTemplateAreas. But I seem to be unable to change it with javascript.

如何使用javascript修改grid-template-areas-属性?

How do i modify the grid-template-areas-property with javascript?

这是我尝试的代码:

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浏览器

PS: I am using Google Chrome a.t.m.

推荐答案

您的elem.style.gridTemplateAreas = "z z z" "a b c" "d e f"

Your elem.style.gridTemplateAreas = "z z z" "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"';

Is not a valid statement or it does not do what you want to do. You want to assign the value "z z z" "a b c" "d e f". Therefore, you need to surround it by quotes like this: 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>

这篇关于如何使用JavaScript修改网格模板区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！