Mi problema inicial es que quiero poner colores personalizados en los títulos de mi menú principal. He hecho esto usando el título + atributo en el CSS. Sin embargo, no quiero que aparezca el atributo de título cuando se pasa el cursor por encima. Así que tuve otra idea y me pregunté si era posible agregar una clase (con JS) a un texto específico. Y si es así, ¿cómo hacerlo?
Cada título de menú tiene la siguiente estructura: <span class="menu-text">Random text</span>
Todos tienen la clase "texto de menú" y es por eso que estoy tratando de diferenciarlos. Para aplicar un color diferente.
¡Gracias de antemano por sus respuestas!
Esto ilustra una forma simple de agregar una clase a un elemento cuando se hace clic en él.
window.addEventListener("load", function(){ // gets the elements with the classname .menu-text in a nodeList const getAllElements = document.querySelectorAll('.menu-text'); for (let item of getAllElements) { // iterates over all of them, and attaches an event item.addEventListener('click', function () { // adds the class .has-background-red this.classList.add('has-background-red'); }); } }); .container { /* just for visual purposes */ display: flex; gap: 16px; } .has-background-red { background-color: red; } <div class="container"> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> <span class="menu-text">Random text</span> </div>