Question

129

How to modify grid-template-areas with javascript

rated 0 times [ 135] [ 6] / answers: 1 / hits: 19208 / 7 Years ago, mon, november 20, 2017, 12:00:00

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.

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

Here is the code I tried:

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: I am using Google Chrome a.t.m.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aman

Add To Favorites

Follow

Total Points: 341

Total Questions: 92

Total Answers: 92

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

answered 7 Years ago micayla · Accepted Answer

Your 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>