Setting style elements according to conditions when page first loads

Hi everyone. I am trying to style my images according to some conditions and trying to show them when the page opens/loads.

var cover1 = document.getElementById("cover1");
var cover2 = document.getElementById("cover2");
var cover3 = document.getElementById("cover3");
var cover4 = document.getElementById("cover4");
var cover5 = document.getElementById("cover5");['visibility']="hidden";['visibility']="hidden";['visibility']="hidden";
if (localStorage.getItem('gardirop_model') == 'surgulu' && localStorage.getItem('gardirop_size') == '132') {['top'] = "0px";['left'] = "14%";['maxHeight'] = "98%";['top'] = "0px";['left'] = "51%";['maxHeight'] = "98%";
if (localStorage.getItem('gardirop_model') == 'surgulu' && localStorage.getItem('gardirop_size') == '220') {['top'] = "0px";['left'] = "10%";['maxHeight'] = "97%";['left'] = "52%";['maxHeight'] = "91%";['top'] = "6px";
if (localStorage.getItem('gardirop_model') == 'menteseli' && localStorage.getItem('gardirop_size') == '132') {['top'] = "-1%";['left'] = "13%";['maxHeight'] = "100%";['top'] = "-1%";['left'] = "50%";['maxHeight'] = "100%";
//menteseli 220cm
if (localStorage.getItem('gardirop_model') == 'menteseli' && localStorage.getItem('gardirop_size') == '220') {['top'] = "0px";['left'] = "8%";['width'] = "20%";['maxHeight'] = "98%";['top'] = "-1%";['left'] = "24%";['maxHeight'] = "99%";['width'] = "20%";['visibility'] = "visible";['visibility'] = "visible";['visibility'] = "visible";

This is my function which sets values to elements and i have called this function like “this.design_on_const();” in constructor, ionViewDidLoad, ngOnInit, ionViewDidEnter and the other lifecycle events. It does work, writes “done” to console but my styles does not shown.
Local storage values had been setted in previous pages so according to this values i have to show my images in this page when page loads. But images dont seem as I wanted, they just shown randomly placed on the page like they take default values. How can I style them in best way or where should I call my function in?
There are my images in html:

     <ion-col width-25>
    <div style="position: relative;display: inline-block;">
      <img class="gardirop" src="{{gardirop}}" style="width: 90%;" />

      <img id="cover1" class="cover_1" src="{{gardirop_cover_1}}" /> 
      <img id="cover2" class="cover_2" src="{{gardirop_cover_2}}" />

      <img id="cover3" class="cover_3" src="{{gardirop_cover_3}}" />
      <img id="cover4" class="cover_4" src="{{gardirop_cover_4}}" />
      <img id="cover5" class="cover_5" src="{{gardirop_cover_5}}" />


And my .scss file:

.gardirop {
z-index: 1;
position: relative;

.cover_1 {
z-index: 10;
position: absolute;
.cover_2 {
z-index: 20;
position: absolute;
display: inline-block;
.cover_3 {
z-index: 20;
position: absolute;
max-height: 99%;
display: inline-block;
width: 20%;
.cover_4 {
z-index: 20;
position: absolute;
max-height: 90%;
display: inline-block;

.cover_5 {
z-index: 20;
position: absolute;
max-height: 89%;
display: inline-block;
width: 16%; }

There’s no need for DOM access here, and it’s very unidiomatic. Bind to the style property instead.

<template ngFor let-cover [ngForOf]="covers">
  <img [src]="cover.src" [style]="">

interface Cover {
  src: string;
  style: string;

covers: Cover[];

Now just put a bunch of Covers into covers, and assign to the src and style property of each as desired. Angular’s change detection and property binding will reflect it in the DOM automatically.

Thank you for your reply, I have solved the issue.