Skip to main content
se añadieron 307 caracteres en el cuerpo; se eliminaron 3 caracteres en el cuerpo; se añadieron 13 caracteres en el cuerpo
Origen Enlace

En html estas poniendo el header conPor lo que veo, es mejor cambiar la id "main-header"clase con replace, (el cual en css se llamaya que con "#")toggle, y en css lo llamas comono sabes que clase ".mainestas cambiando, y si "bg-header" Solo tienes quesuccess" sigue ahi, sera mas difícil cambiar en css "los estilos.main-header" y poner "#main-header" Este es un ejemplo de lo que puedes hacer

const changeColor= document.querySelector("#main-header");
  #mainHeaderconst toggler = document.querySelector(".btn");
  toggler.addEventListener("click", function(){
 background   
  changeColor.classList.replace("bg-color:red;success", "mainHeader")
  });

o puedes poner esa clase seguida deAqui solo cambie en el selector la clase por la id, ya que cuando la clase se cambie ya tieneno podras utilizarlo de esta maneranuevo, también cambie toggle por replace, ya que manejas mejor que clase quieres cambiar

<header class="bg-success text-white p-4 mb-3 main-header"> 

Lo probé en mi editor y funciona correctamente

En html estas poniendo el header con la id "main-header", (el cual en css se llama con "#"), y en css lo llamas como clase ".main-header" Solo tienes que cambiar en css ".main-header" y poner "#main-header"

    #mainHeader{
 background-color:red; 
}

o puedes poner esa clase seguida de la clase que ya tiene de esta manera

<header class="bg-success text-white p-4 mb-3 main-header"> 

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

Origen Enlace

En html estas poniendo el header con la id "main-header", (el cual en css se llama con "#"), y en css lo llamas como clase ".main-header" Solo tienes que cambiar en css ".main-header" y poner "#main-header"

    #mainHeader{
 background-color:red; 
}

o puedes poner esa clase seguida de la clase que ya tiene de esta manera

<header class="bg-success text-white p-4 mb-3 main-header">