Intenté apuntar a cada palabra dividiéndola, colocándola en una matriz y luego cambiando el estilo directamente, pero eso no parece funcionar. ¿Qué me estoy perdiendo?
const highlight= ()=>{ let text = document.querySelector('main').textContent.split(' '); for (const item of text) { item.classList.add('highlight') } }.highlight{ color: yellowgreen; }<main onmouseover="highlight()"> <p>I am passionate about web design and derive joy in problem solving as well as breathing life into web projects.</p> <p>My goal is to broaden my knowledge of web development with access to useful resources such as videos, apps, etc; And make use of the opportunity to interact with various other up and coming web developers as well as experienced web developers who would be able to shed more light on the path that I seek to follow. </p> </main>
El atributo textContent devuelve un valor de cadena . Por lo tanto, después de la split , tiene una matriz de cadenas simples en las que está iterando. Dentro del bucle, item será una cadena simple, y (1) no tiene un classList , ni puede tener estilo, y (2) en cualquier caso, no está modificando el contenido de <main> , sino un valor separado.
Primero debe convertir cada palabra en una <span>word</span> , conservando los espacios (que no desea resaltar) y el formato (p. ej., las etiquetas <p> ). Después de eso, debería ser fácil aplicar el estilo deseado al selector main span .
