change color of various elements with the same id with javascript

Asked

Viewed 193 times

-1

I would like to know how to change the color of my cards , I have several cards with the class "card", and I made a button that when clicking changes to a simple light mode ,and I wanted the cards to be blue because they are transparent in dark mode , only I tried to put all cards with the same id and change in the function and does not change , I tried byClassname does not change either ,I wanted to change the color of all cards

An example of 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>
 ``
javascript html css

2 answers

2

Another solution would be to add/remove a class at the top level that indicates whether dark mode is active or not. The idea is to use this class to change the css properties that change in dark/light mode.

Let’s see the following code:

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>

This way, even if elements are added or removed to the DOM, the dark/light mode is always taken into account.

2

the selector ID it is unique, so you can not use it as attribute of various elements, for this has the class then it should be used. I made an example that can help you in your problem I hope it helps, any questions just send. 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>

  • thank you guy worked , worth even one thousand note to Voce , I did not know that obgadao same

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.