1

Preciso inserir um WIDTH com valor 140px na seguinte classe CSS:

#menu_global2 ul li .icon_menuG

O intuito é ler o tamanho da largura do meu #menu_global2 e então aplicar alterações no CSS.

tenho o seguinte código:

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>

Preciso apenas inserir a propriedade width com valor 140px;

o Alert dentro do If funcionou perfeitamente.

1
  • 2
    Quando usar o getElementById, você não precisa passar a # e nenhum outro parâmetro... No seu exemplo, além da # vc tbm está passando a classe. Se quiser pegar nesse formato, use document.querySelector('#id elemento.classe')
    – Colasanto
    17/07/2020 às 11:40

2 Respostas 2

1

No site da W3C há uma breve referência para HTML DOM Style width Property, você confere um exemplo assim:

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

Insira um ID para o alvo (elemento com ID), e o valor em pixels para o que precisa.

Inserir um ID para definir um style não é a melhor prática, mas atente o teu caso.

0

Resultado:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .