-1

Gostaria de saber como mudo a cor dos meus cards , tenho varios cards com a classe "card" , e fiz um botao que ao clicar muda para um modo light simples ,e queria que os cards ficassem azuis pois são transparentes no modo dark , só que tentei colocar todos os cards com o mesmo id e mudar na função e não muda , tentei byClassname não muda tambem ,queria que ao clicar mudasse a cor de todos os cards

Um exemplo de 2 cards

<div class="card">
         <div class="content">
        <div class="imgBx"> 
        <div class="contentBx">
        <h3 > Seguimento de entregas <br><span> R034 </span></h3>
    </div>
</div>
</div>



</div>

    <div class="card">        
    <div class="content">
        <div class="imgBx"> 
        <div class="contentBx">
        <h3 > cronograma Admissão <br><span> R035 </span></h3>
    </div>
</div>
</div>



Javascript
<script type="text/javascript">

function Light() {
        var back = window.document.body
        back.style.background = "rgb(255, 255, 255)";
        document.getElementById("hdr").style.background = "blue";
        document.getElementsByClassName("card").style.background = "blue";
       } 

</script>
 ``

2 Respostas 2

2

o seletor ID ele é único, então você não pode usar ele como atributo de vários elementos, para isso tem a class então deve ser usada. Fiz um exemplo que pode te ajudar no seu problema espero que ajude, qualquer dúvida só mandar. Ex:

function mudar() {
   let allBox = document.querySelectorAll(".box");
        for (let index = 0; index < allBox.length; index++) {
          allBox[index].style.backgroundColor = "blue";
      }
}
.box {
        color: #fff;
        display: block;
        margin: 2px;
        background-color: #000;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .container {
        display: flex;
        flex-direction: row;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="container">
      <div class="box">
        1
      </div>
      <div class="box">
        2
      </div>
    </div>

    <button onclick="mudar()">Mudar cor</button>
  </body>
</html>

1
  • muito obrigado cara deu certo , valeu mesmo nota mil pra voce , não sabia disso obgadao mesmo 9/01/2021 às 19:00
2

Outra solução seria adicionar/remover uma classe a nível superior que indique se o dark mode está ou não ativo. A ideia é usar esta classe para alterar as as propriedades css que alteram no dark/light mode.

Vejamos o seguinte código:

const bodyElement = document.querySelector('body');
const addCardButtonElement = document.querySelector('#addCardButton');
const removeCardButtonElement = document.querySelector('#removeCardButton');
const darkModeButtonElement = document.querySelector('#darkModeButton');
const cardListElement = document.querySelector('.card-list');

addCardButtonElement.addEventListener('click', () => {
  const cardItemElement = document.querySelectorAll('.card-item')[0].cloneNode(true);
  cardListElement.appendChild(cardItemElement);
});

removeCardButtonElement.addEventListener('click', () => {
  if (cardListElement.childElementCount <= 1) return;
  cardListElement.removeChild(cardListElement.lastChild);
});

darkModeButtonElement.addEventListener('click', () => {
  bodyElement.classList.toggle('dark-mode');
});
.actions {
  display: flex;
  justify-content: space-between;
}

button {
  margin: 10px;
  padding: 10px;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.card-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  height: 100px;
  width: 100px;
  border: 2px solid darkblue;
  background-color: dodgerblue;
  color: white;
}

body.dark-mode {
  background-color: black;
}

.dark-mode .card-item {
  border-color: white;
  background-color: transparent;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dark Mode Switcher Example</title>
  </head>
  <body>
    <div class="actions">
      <div>
        <button id="addCardButton">Adicionar Card</button>
        <button id="removeCardButton">Remover Card</button>
      </div>
      <button id="darkModeButton">Dark Mode</button>
    </div>

    <ul class="card-list">
      <li class="card-item">Card</li>
    </ul>  
  </body>
</html>

Desta forma, mesmo que sejam adicionados ou removidos elementos ao DOM, o dark/light mode é sempre tido em conta.

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 .