JavaScript / CSS / DOM - dynamic class value overwrite, concatenation problem/challenge

Question

In this snippet, changing the background-color to yellow works. But when i try to modify the value of 'grid-template-column', which takes an unusual value, a string of repeating 'auto' strings - no go. I'm trying to change the value to ... 'auto auto auto', but it won't overwrite the original value inside the style sheet, which looks like this.. 'grid-template-columns: auto auto auto auto auto auto;' I know this looks very goofy, but if you check out the css param 'grid-template-column', the value it requires is a string of space delineated 'auto's to define the number of columns. A very weird hanging chad that for some reason i can't overwrite.

Thanks in advance.

       // create a reference to linked stylesheet
        const stylesheet = document.styleSheets[0];
        const rules = stylesheet.cssRules || stylesheet.rules; 
        
        // loop through the style sheet reference to find the classes to be modified and modify them

        for (let i = 0; i < rules.length; i++) {
            if (rules[i].selectorText === '.grid-container') {
                rules[i].style['background-color'] ='yellow';
                rules[i].style['grid-template-column'] = 'auto auto auto';
                break;
            }
        }

grid-template-columns, with an ‘s’ at the end.

Brett Donald
– Brett Donald

2025-05-15 04:30:56 +00:00
Commented May 15 at 4:30 — Brett Donald
– Brett Donald, Commented May 15 at 4:30

user30542368 · Accepted Answer · 2025-05-15 04:14:48Z

4

Im not 100% sure but maybe if you change

rules[i].style['grid-template-column'] = 'auto auto auto';

to

rules[i].style['grid-template-columns'] = 'auto auto auto';

then it might work. The CSS property is grid-template-columns not grid-template-column.

answered May 15 at 4:14

user30542368

563 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jesse Vanderwerf · Accepted Answer · 2025-05-15 16:19:54Z

0

It looks like @Brett Mchdonald is correct. You have a typo in your post I'd check the spelling of the grid-template-columns

   // create a reference to linked stylesheet
    const stylesheet = document.styleSheets[0];
    const rules = stylesheet.cssRules || stylesheet.rules; 
    
    // loop through the style sheet reference to find the classes to be modified and modify them

    for (let i = 0; i < rules.length; i++) {
        if (rules[i].selectorText === '.grid-container') {
            rules[i].style['background-color'] ='yellow';
            rules[i].style['grid-template-columns'] = 'auto auto auto';
            break;
        }
    }

answered May 15 at 16:19

Jesse Vanderwerf

11 bronze badge

Comments

chrwahl · Accepted Answer · 2025-05-17 09:50:29Z

0

I don't know if this fits your use case, but changing the a style sheet just seams wrong. Spelling mistake or not, CSS is called "Cascading" for a reason. There is no reason to change the original CSS as long as you define the new style after the original.

So, this can be done simply by inserting a new style element:

<html>

<head>
  <style>
    .grid-container {
      display: grid;
      background-color: orange;
      grid-template-columns: 100px auto;
    }
  </style>
  <style>
    .grid-container {
      background-color: yellow;
      grid-template-columns: repeat(3, auto);
    }
  </style>
</head>

<body>
  <div class="grid-container">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
  </div>
</body>

</html>

Or using JavaScript to include a new style element after the last one in the list of style sheets:

const last_style_elm = document.styleSheets[document.styleSheets.length - 1].ownerNode;

let newstyle = document.createElement('style');
newstyle.innerText = `.grid-container {
      background-color: yellow;
      grid-template-columns: repeat(3, auto);
    }`;

last_style_elm.insertAdjacentElement('afterend', newstyle);

<html>

<head>
  <style>
    .grid-container {
      display: grid;
      background-color: orange;
      grid-template-columns: 100px auto;
    }
  </style>
</head>

<body>
  <div class="grid-container">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
  </div>
</body>

</html>

Update

After the comment, maybe predefined CSS selectors could be a better alternative if there are a limited number of variations:

document.querySelector('.grid-container').dataset.cols = 3;

<html>

<head>
  <style>
    .grid-container {
      display: grid;
      background-color: orange;
      grid-template-columns: repeat(1, auto);
    }
    .grid-container[data-cols="2"] {
      grid-template-columns: repeat(2, auto);
    }
    .grid-container[data-cols="3"] {
      grid-template-columns: repeat(3, auto);
    }
    .grid-container[data-cols="4"] {
      grid-template-columns: repeat(4, auto);
    }
  </style>
</head>

<body>
  <div class="grid-container" data-cols="2">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
  </div>
</body>

</html>

edited May 17 at 9:50

answered May 15 at 17:13

chrwahl

14.1k2 gold badges25 silver badges40 bronze badges

2 Comments

Garth Vader May 15 at 18:50

Thanks, chrwahl. It was, in the end just a typo. But I wanted to explain why im doing this. I'm using javascript to generate a button matrix (step sequencer interface). I need the number of rows and columns to be dynamic so the user can change the resolution of the grid anytime, thats why i'm going to the bother. Since the size of the grid is determined by the value of grid-template-columns in css, the only way to make this dynamic is to overwrite the class on-the-fly. Its actually extremely cool, didn't know you could do this!

chrwahl May 17 at 9:51

@GarthVader I updated my answer with another suggestion. I hope that you like it.

Collectives™ on Stack Overflow

JavaScript / CSS / DOM - dynamic class value overwrite, concatenation problem/challenge

3 Answers 3

Comments

Comments

Update

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Update

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related