Passing parameters to css from Json?

Question

css

Good afternoon!
Please tell me, I am reading width, height parameters from JSON.
How can I pass these parameters to CSS?
example:

{
  "global": [
    {
      "id": "1",
      "width": "50",
      "height": "150"
    },
    {
      "id": "2",
      "width": "150",
      "height": "350"
    },
    {
      "id": "3",
      "width": "750",
      "height": "850"
    }
  ]
}

How to put what I thought in CSS

.Layer + id{
    width:   px; /* Ширина блока вставить из того что я считал */   
    height:   px; /* Высота блока вставить из того что я считал*/   
   }

either in html, instead of spaces, what I read from the file
<button style="height: px;width: px"></button>

Answer 1

const all = {
  "global": [
    {
      "id": "1",
      "width": "50",
      "height": "150"
    },
    {
      "id": "2",
      "width": "150",
      "height": "350"
    },
    {
      "id": "3",
      "width": "750",
      "height": "850"
    }
  ]
};

for(item of all.global){
    let elm = document.querySelector('.layer' + item.id);
    elm.style.width = item.width + 'px';
    elm.style.height = item.height + 'px';
}

Answer 2

the first way is not sure what is possible,
but dynamically I would try something like this:

jstr.global.forEach((a) => 
   document.querySelectorAll(".Layer + a.id").forEach((el) => 
        { el.style.width  = a.width; el.style.height = a.height }))