0

const changeColor= document.querySelector(".bg-success");
const toggler = document.querySelector(".btn");

toggler.addEventListener("click", function(){
  changeColor.classList.toggle("mainHeader")
});
.mainHeader{
  background-color:red!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body>
  <header id="main-header" class="bg-success text-white p-4 mb-3">
    <div class="container">
      <h1 id="header-title">
        Item Lister
      </h1>
    </div>
    <button class="btn btn-dark">Press Me </button>
  </header>
  
</body>

Hola, soy nuevo en la comunidad y quisiera saber si podrian aclararme una duda, al momento de usar el classList.toggle sin bootstrap funciona de maravilla, pero cuando intento usarlo con bootstrap y sus clases no me funciona, incluso aplicandole !important en el css, agradeceria su ayuda, muchas gracias!

1
  • Con el codigo como lo escribiste ahi, no funciona? Commented el 2 jun. 2020 a las 2:05

1 respuesta 1

0

Por lo que veo, es mejor cambiar la clase con replace, ya que con toggle, no sabes que clase estas cambiando, y si "bg-success" sigue ahi, sera mas difícil cambiar los estilos. Este es un ejemplo de lo que puedes hacer

const changeColor= document.querySelector("#main-header");
  const toggler = document.querySelector(".btn");
  toggler.addEventListener("click", function(){

  changeColor.classList.replace("bg-success", "mainHeader")
  });

Aqui solo cambie en el selector la clase por la id, ya que cuando la clase se cambie ya no podras utilizarlo de nuevo, también cambie toggle por replace, ya que manejas mejor que clase quieres cambiar

Lo probé en mi editor y funciona correctamente

4
  • No no amigo, el .mainHeader que ves en CSS es la clase que quiero llamar en javascript para que quite el color verde que por default otorga el "bg-success" de bootstrap.
    – tonsofcode
    Commented el 2 jun. 2020 a las 1:59
  • Oh perdon :c , vi mal Commented el 2 jun. 2020 a las 2:00
  • Todo bien, lo que me parece raro es que sin bootstrap puedo hacerlo con normalidad, quisiera saber es que tengo que agregarle al codigo para que pase por encima de bootstrap (ya probe con !important pero nada pasa)
    – tonsofcode
    Commented el 2 jun. 2020 a las 2:01
  • Mira si eso te ayuda Commented el 2 jun. 2020 a las 2:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.