Hice un botón de alternancia para el modo día y noche copiando el código de alguien. No sé la diferencia entre className y classList. así que probé className y classList. con classList, el código funciona bastante bien. en lugar de classList puse className. pero el código no funciona. por favor ayudame...
<style> .btnJerome { height: 40px; width: 80px; border: none; background: lightblue; border-radius: 30px; outline: 0; cursor: pointer; position: relative; } .span1 { position: relative; height: 30px; width:31px; background: blue; border-radius: 50px; display: block; transition: .5s; } .active { background: lightgreen; } .active span { background: green; margin-left: 40px; } </style> <button onclick="toggleBtn()" class="btnJerome" id="btn"><span class="span1"></span></button> <script> var btn = document.getElementById("btn"); function toggleBtn() { btn.classList.toggle("active"); } </script>Consulte la siguiente respuesta de stackoverflow ,
Usando "classList", puede agregar o eliminar una clase sin afectar a ninguna otra que pueda tener el elemento. Pero si asigna "className", eliminará las clases existentes mientras agrega la nueva (o si asigna una cadena vacía, las eliminará todas).
Asignar "className" puede ser conveniente para los casos en los que está seguro de que no se usarán otras clases en el elemento, pero normalmente usaría los métodos "classList" exclusivamente.
Y "classList" también tiene prácticos métodos de "alternar" y "reemplazar".
https://teamtreehouse.com/community/difference- between-classlist-and-classname