Manipulating CSS Property with Javascript

Question

I need to insert a WIDTH worthwhile 140px in the following CSS class:

#menu_global2 ul li .icon_menuG

The intention is to read the size of my width #menu_global2 and then apply changes to the CSS.

I have the following code:

var elemento = document.getElementById("menu_global2");
var propriedade = window.getComputedStyle(elemento).getPropertyValue("width");
  if (propriedade == "170px"){
    //alert("teste");
    document.getElementById("#menu_global2 ul li .icon_menuG").style.width = "140px";
  }

#menu_global2{
  background: #081037;
  float: left;
  position: absolute;
  height: 100%;
  width: 170px;
  padding-top: 200px;
  transition: 300ms ease-in-out;
}

/*===Item por item do MENU, adiciona espaço entre eles e um fundo claro===*/
#menu_global2 ul li{
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.05);
}
/*=== MODIFICA A COR DO TEXTO DO MENU E O TAMANHO DA FONTE===*/
#menu_global2 ul li a{
  text-decoration: none;
  color: #fff;
}
.globaltest{
  position: relative;
  text-align: center;
  width: 100%;
}
#menu_global2 ul li .icon_menuG {
  display: inline-flex;
}
/*===ALINHA O ICONE NO CENTRO DO MENU===*/
#menu_global2 ul li .icone{
}
/*===Espaçamento e tempo de transição dos icones===*/
#menu_global2 ul li .icone .fa{
  line-height: 42px;
  transition: 0.5s;
}
/*===Tamanho dos icones===*/
#menu_global2 ul li .icon_menuG .fa{
  font-size: 25px;
}
#menu_global2 ul li .icon_menuG .nome_menuG p{
  color: white;
  font-size: 15px;
  font-family: sans-serif;
  line-height: 42px;
  margin-left: 5px;
}

<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset200802.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<nav id="menu_global2">
        <ul>
            <li>
                <a href="#">
                    <div class="globaltest">
                        <div class="icon_menuG">
                            <div class="icone">
                                <i class="fa fa-line-chart" aria-hidden="true"></i>
                            </div>
                            <div class="nome_menuG">
                                <p>Metas</p>
                            </div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </nav>

I just need to enter the property width worthwhile 140px;

the Alert inside the If worked perfectly.

Answer 1

On the W3C website there is a brief reference to HTML DOM Style width Property, you give an example like this:

document.getElementById("myBtn").style.width = "300px";

Insert a ID to the target (element with ID), and the pixel value for what you need.

Insert a ID to define a style is not best practice, but watch your case.

Answer 2

Upshot:

var elemento = document.getElementById("menu_global2");
var propriedade = window.getComputedStyle(elemento).getPropertyValue("width");
  if (propriedade == "170px"){
    //alert("teste");
    document.querySelector('#menu_global2 ul li .icon_menuG').style.width = "140px";
  }

#menu_global2{
            background: #081037;
            float: left;
            position: absolute;
            height: 100%;
            width: 170px;
            /*box-shadow: 1px 0px 5px #000;*/
            padding-top: 200px;
            transition: 300ms ease-in-out;
        }
        /*==================================================*/
        /*===Item por item do MENU, adiciona espaço entre eles e um fundo claro===*/
        #menu_global2 ul li{
            margin-bottom: 10px;
            background-color: rgba(255, 255, 255, 0.05);
        }
        /*=== MODIFICA A COR DO TEXTO DO MENU E O TAMANHO DA FONTE===*/
        #menu_global2 ul li a{
            text-decoration: none;
            color: #fff;
        }
        .globaltest{
            position: relative;
            text-align: center;
            width: 100%;
        }
        #menu_global2 ul li .icon_menuG {
            display: inline-flex;
        }
        /*===ALINHA O ICONE NO CENTRO DO MENU===*/
        #menu_global2 ul li .icone{
        }
        /*===Espaçamento e tempo de transição dos icones===*/
        #menu_global2 ul li .icone .fa{
            line-height: 42px;
            transition: 0.5s;
        }
        /*===Tamanho dos icones===*/
        #menu_global2 ul li .icon_menuG .fa{
            font-size: 25px;
        }
        #menu_global2 ul li .icon_menuG .nome_menuG p{
            color: white;
            font-size: 15px;
            font-family: sans-serif;
            line-height: 42px;
            margin-left: 5px;
        }

<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset200802.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<nav id="menu_global2">
        <ul>
            <li>
                <a href="#">
                    <div class="globaltest">
                        <div class="icon_menuG">
                            <div class="icone">
                                <i class="fa fa-line-chart" aria-hidden="true"></i>
                            </div>
                            <div class="nome_menuG">
                                <p>Metas</p>
                            </div>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="globaltest">
                        <div class="icon_menuG">
                            <div class="icone">
                                <i class="fa fa-cube" aria-hidden="true"></i>
                            </div>
                            <div class="nome_menuG">
                                <p>Gerenciamentos</p>
                            </div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </nav>