Estoy tratando de obtener la etiqueta a debajo de la etiqueta p específica.
He intentado esto pero no funciona. Estoy tratando de cambiar el estilo CSS de la parte del enlace a color rojo y llegué con una línea de puntos rojos cuando al pasar el mouse, la línea se volverá sólida.
var font_8 = document.getElementsByClassName('font_8');var elements = font_8.getElementsByTagName('a');html:
<p class="font_7" 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> <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>js:
<script> const styles = { 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 (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() </script>Usando JavaScript solo para aprender, esta es mi solución con un selector de consulta :
const styles = { textDecoration: 'none', color: 'red', borderBottom: '2px dotted currentColor', } const normalStyle = 'dotted' const hoverStyle = 'solid' function applyStylesAndHover() { // querySelectorAll allows you to basically use a CSS selector in your JS const elements = document.querySelectorAll('.font_8 a'); elements.forEach((element) => { Object.keys(styles).forEach((key) => { element.style[key] = styles[key] }) element.addEventListener('mouseover', function() { element.style.borderBottomStyle = normalStyle; }) element.addEventListener('mouseout', function() { element.style.borderBottomStyle = hoverStyle; }) }) } applyStylesAndHover() <p class="font_7" style="font-size:16px"> text text text text <br> <span style="text-decoration:underline"> <a href="URL-link" target="_blank" rel="noreferrer noopener">link</a> </span>（text) </p> <p class="font_8" style="font-size:16px"> text text text text <br> <span> <a href="URL-link" target="_blank" rel="noreferrer noopener">link</a> </span>（text) </p>Aunque para diseñar el <a> al pasar el mouse no necesita JavaScript. CSS es perfecto para esto:
.font_8 a { /* An <a> inside of an element with the class of font_8 */ color: red; text-decoration: none; border-bottom: 2px solid red; } .font_8 a:hover { /* An <a> that is being hovered inside of an element with the class of font_8 */ border-bottom-style: dotted; } <p class="font_7" style="font-size:16px"> text text text text <br> <span style="text-decoration:underline"> <a href="URL-link" target="_blank" rel="noreferrer noopener">link</a> </span>（text) </p> <p class="font_8" style="font-size:16px"> text text text text <br> <span> <a href="URL-link" target="_blank" rel="noreferrer noopener">link</a> </span>（text) </p>Un problema que encontré aquí es que estás tratando de obtener <a> usando font_8.getElementsByTagName('a'); que no funcionará. deberá asignar una identificación a la etiqueta y obtenerla usando
var element = document..getElementsById('myAncor');
y para moverlo dentro de la etiqueta p, deberá agregar el element a font_8 usando .appenChild() .
editar: sry no entendí bien tu pregunta.
para hacer esto con el uso de JS
var element= font_8[0].children[1].children[0]; element.addEventListener( // your core )o
var elements= document.querySelectorAll('.font_8 a'); //Your code elements[i].addEventListener( // your core )