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

184
Visualizações
Change color in a number of different divs that all share the same class

I have a site with a lot of different div. The thing they have in common is all share (besides their unique classes) a shared class. Lets just call it .changeClass.

What I am looking for is code with a button (or radio buttons) and by clicking the button, the background instance of all these divs will get the same one (which the .changeClass has). So the .changeClass will just be active when the button is toggled/clicked.

I am looking for a way to do this with pure javascript and no Jquery.

Sorry for being a noob :-)

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

First lets get all divs that are on the DOM

const divs = document.getElementsByTagName("div");

You will have array of all the divs that are on the DOM. Then add your class to all of it. In order to do that, lets loop it.

divs.forEach(div => div.className += div.className + " changeClass");
about 4 years ago · Juan Pablo Isaza Relatório

0

Could this be what you are looking for? In html:

<button onclick="changeColor('blue');">blue</button>

In JS

function changeColor(newColor) {
    var elem = document.getElementsByClassName("changeClass");
    elem.style.color = newColor;
}

The HTML color can be any color you would like it to be, just change they name from blue to any color or input a hex code.

about 4 years ago · Juan Pablo Isaza Relatório

0

We have multiple divs with the same class value We have given a function to the button that we want the event to happen when it is clicked, using the onclick method. Now when we click the button, the function called myFunction will run.

HTML:

<div class="changeClass">Im Example Div</div>
<div class="changeClass">Me Too</div>
<button type="submit" onclick="myFunction()">Click To Change Div BgColors ! 
</button>

We must define myFunction as Javascript and change the background color.

We have defined a function called myFunction.

With the getElementsByClassName selector in our function, we got all the data with the class value changeClass in object format.

To add a background (or any css property) to all of these objects; We put the object in a for loop and now we split our elements. We can now define a background color for our elements with the style.backgroundColor parameter.

JavaScript:

function myFunction(){
    var divs = document.getElementsByClassName('changeClass');

    for(var i=0; i< divs.length; i++){
        divs[i].style.backgroundColor = 'red';
    }
}

For more detailed information, you can refer to the resources: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

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