0

Criei uma função em Javascript para pegar a largura de uma div e depois adicionar essa largura em outras 4 divs, só que não está funcionando.

JavaScript

window.onload = function() {
    var slidewidth = document.getElementById("slideshow").offsetWidth;
    var objs = document.getElementsByClassName("slide");
    for(var i in objs) {
        objs[i].style.width = slidewidth;
    }
}

HTML

<div class="slideshow" id="slideshow">
    <div class="slideshowarea">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>
</div>
2
  • Por que "não está funcionando"? O que acontece?
    – Jéf Bueno
    Commented 9/05/2018 às 21:01
  • Não está adicionando o width da div .slideshow na div com a classe .slide. Commented 9/05/2018 às 21:03

2 Respostas 2

1

O seu for não está percorrendo os elementos recuperados. Você precisa alterá-lo para:

for(var i = 0; i < objs.length; i++) ...

Depois, quando você vai inserir um valor em um style você precisa especificar a medida que você está usando. Isso significa que em css 100 não representa uma medida e sim 100px. Quando você recupera o valor em offsetWidth o valor retornado é apenas 100.

Você precisa setar px "manualmente" ao alterar o valor de width da sua classe slide:

window.onload = function() {
    
    var slidewidth = document.getElementById("slideshow").offsetWidth;
    var objs = document.getElementsByClassName("slide");
    
    for(var i = 0; i < objs.length; i++) {
        objs[i].style.width = slidewidth + "px";
    }
    
}
.slideshow {
  width: 100px;
  height: auto;
  background-color: #FF0000;
}

.slide {
  width: 10px;
  height: auto;
  background-color: #00FF00;
}
<div class="slideshow" id="slideshow">
    <div class="slideshowarea">
        <div class="slide">a</div>
        <div class="slide">b</div>
        <div class="slide">c</div>
        <div class="slide">d</div>
    </div>
</div>

Caso o valor do width do slideshow esteja no css, você pode recuperar diretamente, sem necessitar incluir o px como medida do seu css, utilizando getComputedStyle:

var slidewidth = window.getComputedStyle(document.getElementById("slideshow")).width;
2
  • 1
    Funcionou cara, muito obrigado Commented 9/05/2018 às 21:17
  • Que bom que te ajudei, Mateus! Ah, e não se esqueça de marcar uma das respostas como correta! :)
    – bio
    Commented 9/05/2018 às 21:31
1

Provavelmente é porque você escreveu for errado.

Fazer for (var i in objs) irá iterar por todas as propriedades de objs (incluindo os indíces) e a cada laço a variávei i será um destes ites.

Você está tentando usar a variável i como índice da coleção objs. O certo seria fazer então a variável i receber apenas os índices possíveis para a coleção objs.

Ou então usar for of para atribuir à variável i cada elemento da coleção (modo 2 no exemplo).

Além disso tudo, você preicisa especificar a unidade de medida para o width, por exemplo px.

window.onload = function() {
    var slidewidth = document.getElementById("slideshow").offsetWidth;
    var objs = document.getElementsByClassName("slide");
    for(var i = 0; i < objs.length; i++) {
        objs[i].style.width = slidewidth + 'px';
    }
    
    // 2
    for(var i of objs) {      
      i.style.width = slidewidth + 'px';
    }
}
<div class="slideshow" id="slideshow">
    <div class="slideshowarea">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>
</div>

1
  • Continua não funcionando :( Commented 9/05/2018 às 21:09

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 .