Soy nuevo en javascript. intente cambiar el estilo CSS por javascript. Me gustaría agregar el estilo para la etiqueta a debajo de la etiqueta p específica (.font_8), y la etiqueta a ya tiene algo de estilo.
el estilo que trato de hacer es este, pero me gustaría agregar el estilo por javascript.
<style> .font_8 a { text-decoration: none; color: red; border-bottom: 2px dotted currentColor; } .font_8 a:hover { border-bottom: 2px solid currentColor; } </style> <p class="font_8" style="font-size:16px">text text text text<br> <span style="text-decoration:underline"><a href="URL-link" target="_blank" rel="noreferrer noopener">link link link</a></span>（text） </p> <script> function getElements(){ var font_8 = document.getElementsByClassName('font_8'); var elements = font_8.getElementsByTagName('a'); var len = elements.length; for (var i = 0; i < len; i++){ elements[i].style = { textDecoration: 'none', color: 'red', borderBottom: '2px dotted currentColor', } } } function getElements(){ var font_8 = document.getElementsByClassName('font_8'); var elements = font_8.getElementsByTagName('a'); var len = elements.length; for (var i = 0; i < len; i++){ elements[i].addEventListener('mouseover', function() { elements[i].style.borderBottom= '2px solid currentColor'; } ) } } </script>No creo que esto sea necesariamente lo que buscas. Pero obtuve el detector de eventos agregando la línea roja debajo de la etiqueta p y también agrega los estilos constantes. No sabía si estaba tratando de agregarlo a font_8 oa la etiqueta ya que estaba obteniendo ambos antes de cada bucle.
También agregué un evento mouseout para deshacerme de la línea continua.
const styles = { textDecoration: 'none', color: 'red', borderBottom: '2px dotted currentColor', } function getElements() { var elements = document.getElementsByClassName('font_8'); var len = elements.length; for (let i = 0; i < len; i++) { Object.keys(styles).forEach((key)=>{ elements[i].style[key]=styles[key] }) } for (let i = 0; i < len; i++){ elements[i].addEventListener('mouseover', function() { elements[i].style.borderBottom= '2px solid currentColor'; }) elements[i].addEventListener('mouseout', function() { Object.keys(styles).forEach((key)=>{ elements[i].style[key]=styles[key] }) }) } } getElements() <p class="font_8" style="font-size:16px">text text text text <br> <span style="text-decoration:underline"> <a href="URL-link" target="_blank" rel="noreferrer noopener">link link link</a> </span> (text） </p>Sin embargo, no sabía si querías recuperar el punteado o no. Si no desea recuperar la línea punteada, puede usar el método Object.keys y ponerlo en la función mouseout como:
elements[i].addEventListener('mouseout', function() { elements[i].style.borderBottom= ''; })Debe reemplazar todos sus len[i] con elements[i] (la variable len almacena un número, la variable de elements almacena una lista).
En la línea 14 , debería ser un = creo (si desea actualizar el estilo del element[i] ):
for (var i = 0; i < len; i++) { elements[i].style = { textDecoration: 'none', color: 'red', borderBottom: '2px dotted currentColor', } } Y falta un corchete de cierre en la línea 27-28 (para cerrar el ciclo for ).