用 Javascript 更改 Boostrap 卡 CSS

Question

The defeault style of the Bootstrap card on my website is light but I have javascript that turns my site theme dark during certain hours in the evening/early morning. I am trying to change the style of the Bootstrap card to dark. I have linked the code below but it does not work as expected.

 let hour = new Date().getHours(); if(hour < 14 || hour > 20) { darkMode(); } function darkMode() { var element_body = document.body; element_body.classList.toggle("dark-mode-body"); var links = document.querySelector("a"); /* returns first anchor tag within the document */ links.classList.toggle("dark-mode-anchor"); var cards = document.getElementsByClassName("card bg-light"); for(var i = 0; i < cards.length; i++) { cards[i].classList.toggle("card bg-dark"); } }

 <div class="card bg-light"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some example text. Some example text.</p> <a href="#" class="btn btn-light mr-0" role="button">Card link</a> </div> </div>

Answer 1

You should just add the bg-dark class. You code is currently raising an error, as you cannot toggle multiple classes with classList.toggle .

Change

cards[i].classList.toggle("card bg-dark");

To

cards[i].classList.add("bg-dark");

To change each button within a card to have a dark style as well, you can use document.querySelectorAll and remove the btn-light class and add the btn-dark class.

var btns = document.querySelectorAll(".card a.btn");
btns.forEach(btn=>{
    btn.classList.remove("btn-light");
    btn.classList.add("btn-dark");
});