Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

89
Visualizações
Changing div width with a button

i am trying to learn JS, React and Node.js. Now i am trying to change the width of a div with a button but i'm getting always the same error, that it "Cannot read property 'style' of null

Here is my JS

var sideNav = document.getElementById("side-nav");
var linksSideNavTop = document.getElementById("links-side-nav-top");
var linksSideNavBottom = document.getElementById("links-side-nav-bottom");


function openMenuTablet() {
    if (sideNav.style.width === '70px') {
        sideNav.style.width = '300px';
        linksSideNavTop.style.display = "block";
        linksSideNavBottom.style.display = "block";
    } else {
        sideNav.style.width = '70px';
        linksSideNavTop.style.display = "none";
        linksSideNavBottom.style.display = "none";
    };
}

Here the CSS

#side-nav {
    position: fixed;
    background-color: #454545;
    height: 100%;
    width: 70px;
}
about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

Have a look at this working example:

function changeWidth() {
  document.getElementById('myContainer').style.width = '500px'
}
#myContainer {
  width: 250px; 
  height: 50px; 
  background: #aaa;
}
<div id="myContainer"></div>
<button onclick="changeWidth()">Change width</button>

about 4 years ago · Juan Pablo Isaza Relatório

0

Above answers Are correct, also I can show my example how to do that by .classList.toggle()

const box = document.querySelector(".box")
const button = document.querySelector("button")

button.addEventListener("click", () => {
  box.classList.toggle("toggle")
})
.box{
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 10px;
  transition: 0.5s
}

.box.toggle{
  width: 200px;
}
<div class="box"></div>
<button>Toggle Class List</button>

if your class list has toggle your div width increases and and in Javascript .toggle method removes and adds your passed classList which is "toggle" in our case

about 4 years ago · Juan Pablo Isaza Relatório

0

The error "Cannot read property 'style' of null" means that the code to get the element (document.getElementById()) isn't retrieving (founding) an element with that particular ID.

I would suggest for you to double check that you don't have duplicated ID with the same exact name and also to move the document.getElementById() inside your function.

function openMenuTablet() {
    var sideNav = document.getElementById("side-nav");
    var linksSideNavTop = document.getElementById("links-side-nav-top");
    var linksSideNavBottom = document.getElementById("links-side-nav-bottom");

    if (sideNav.style.width === '70px') {
        // ...
    } else {
        // ...
    };
}

Also a good alternative to document.getElementById() would be document.querySelector():

document.querySelector("h1");         // Search html tag "h1"
document.querySelector(".rect");      // Search class name "rect"
document.querySelector("#square");    // Searcd id name "square"

For last, to know if you are really founding and retrieving the intended element you can for example console.log() the var element:

var sideNav = document.getElementById("side-nav");
console.log(sideNav);

// ...
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda