Estoy tratando de cambiar el color de las líneas de mi barra de hamburguesas. Utilicé un detector de eventos y trato de apuntar a los intervalos que componen las líneas del menú de hamburguesas, dándole al intervalo una clase "intervalo". como puedes ver aquí
var distFromTop = document.querySelector(".om-mux").offsetTop; var distFromTop2 = document.querySelector(".galleri").offsetTop; var distFromTop3 = document.querySelector(".event-sektion").offsetTop; window.addEventListener("scroll", function() { var scroll = this.scrollY; if (scroll > distFromTop && scroll < distFromTop2) { document.querySelector(".span").style.backgroundColor = "black"; } else if (scroll > distFromTop2 && scroll < distFromTop3) { document.querySelector(".span:before").style.backgroundColor = "white"; } else if (scroll > distFromTop3){ document.querySelector(".span").style.backgroundColor = "black"; } else { document.querySelector(".span").style.backgroundColor = "white"; } })`El código funciona bien, pero el problema es que esto solo afecta el tramo medio, debido al hecho de que las líneas superior e inferior tienen el estilo:
` .menu-btn > span, .menu-btn > span::before, .menu-btn > span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: #ffffff; transition-duration: .25s; }` ¿Cómo me dirijo a span:before & span:after? puedo hacer algo como esto? document.querySelector(".span:before").style.backgroundColor = "white";
referencia: Cambio de estilos de pseudo-elemento CSS a través de JavaScript
Lo más cercano a cambiar el estilo de un pseudoelemento en JavaScript es agregar y eliminar clases y luego usar el pseudoelemento con esas clases. Un ejemplo para ocultar la barra de desplazamiento:
CSS
.hidden-scrollbar::-webkit-scrollbar { visibility: hidden; }javascript
document.getElementById("editor").classList.add('hidden-scrollbar');Para eliminar más tarde la misma clase, puede usar:
document.getElementById("editor").classList.remove('hidden-scrollbar');El inglés no es mi primer idioma, así que tengan paciencia conmigo. Intente agregar una nueva clase para abarcar cuando se desplace y asigne a esa clase la propiedad de color de fondo en su archivo CSS. Ejemplo
En lugar de esto
document.querySelector(".span").style.backgroundColor = "black";Probar
document.querySelector(".span").classList.add('black');y agregue esta propiedad css de clase en su archivo css.
.menu-btn > span.span.black::before{ background-color: #000; }