Altering HTML document's "master" CSS template permanently by JavaScript

Question

I have a CSS class that is being used to show many DIVs in a CSS layout-grid format:

.wrapper {
   display: grid;
   grid-templpate-columns: 200px 200px 200px;
}

and through javascript, I changed the width of some elements that make use of it (i.e. getElementByClass("wrapper") and looping). It works fine for those that are already displaying:

Problem: when I add a new DIV via JS, the new DIV would only revert to widths of 200px!

Seems to me that when generating a new element (by code), the browser calls up the original template and simply map it (using all 200px) to the new element I just created!

I've looked around and cannot find topics relating to altering the "master" css template being stored somewhere...

Question: Is there a way to permanently alter the loaded CSS template's properties?

Note: I cannot loop through ".wrapper" to alter the newly added element because I'm using Angular4 and seems that it doesn't run any more code after rendering the template (here altering the table view)

If you can create new DIVs why not create them at the width you want. I assume that the 200px DIV is from a CSS ruleset. Whether this rogue ruleset is from an external stylesheet, inline block, or ng template, there is a thousand ways to override it. If you post some semblance of real code that you have done so far, we would be better equipped to help. Images are at most marginally helpful. — zer00ne, Sep 18 '17 at 05:35

Eladian · Answer 1 · 2017-09-18T05:44:44.797

Why not add the class to the element and then change the width before appending to the DOM, or append to the DOM and then change the width directly after? :)

Take a look at this snippet:

const wrappers = document.getElementsByClassName('wrapper');
for (let i = 0; i < wrappers.length; i++) {
  const div = document.createElement('div');
  div.style.background = 'yellow';
  div.style.color = 'black';
  div.innerHTML = 'appended';
  wrappers[i].style['grid-template-columns'] = '200px 200px 200px 200px';
  wrappers[i].appendChild(div);

}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  color: white;
}

.blue {
  background: orange;
}

<div class="wrapper">
  <div class="blue">
    200px
  </div>
  <div class="blue">
    200px
  </div>
  <div class="blue">
    200px
  </div>

</div>

<div class="wrapper">
  <div class="blue">
    200px
  </div>
  <div class="blue">
    200px
  </div>
  <div class="blue">
    200px
  </div>
</div>

Given that you're using angular, you will have something like:

export class MyComponent{
    private people:string[];

    ngInit(){
      //get people
      myService.retrievePeople().forEach(function(person){
          addPerson(person);
      })
    }

    addPerson(person){
          people.push(person);
          ... update grid ... 
    }
}

addition of the row (in the view) is automatic through ng4's "*ngFor" construct over a data structure (array of objects each spelling out a row). So I don't really have any control over when the element is created... — MikeC, Sep 18 '17 at 05:30
When the array is appended to, update the style of the wrappers :) I posted a snippet above. — Eladian, Sep 18 '17 at 05:39
added another example with how I would approach it in angular — Eladian, Sep 18 '17 at 05:45

Altering HTML document's "master" CSS template permanently by JavaScript

1 Answers1