CODEWITHSUNDEEP
javascriptjquerycss
Joseph
Joseph

Reputation: 57

failing to update grid-template-areas css property via java script

I can see the property grid-template-areas inside the style object:

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

i tried setting it via :

js directly

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

jquery

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

but nothing seems to work, the property remains empty.

Upvotes: 1

Views: 665

Answers (1)

FilmFiddler
FilmFiddler

Reputation: 516

Setting Template Areas like that will require nested quotes. It needs one set of quotes for the overall JavaScript string, and within that, it needs a pair of quotes to denote each set of row cells in the styling.

The actual column and row declarations have not been provided. But anyway one of the following should work, depending on whether you have declared a single row of 3 cells, or 3 rows of 1 cell each:

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

Or:

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

Upvotes: 3

Related Questions