¿Cómo agrego un subrayado para todos los enlaces en el sitio web cuando hago clic en el botón?

1 minuto de lectura

¿Como agrego un subrayado para todos los enlaces en el
nsog8sm43x

después de una hora de prueba y error con la creación de un script simple, les pido ayuda. me gustaria crear un buttonque después de hacer clic en él agregará un estilo de subrayado a todos a selectores en el sitio web. Ya escribí una función simple, pero desafortunadamente no funciona. Hay un gran número de a selectores en toda la página, por lo que no enviaré el código de toda la página.

archivo JS:

function underlineLinks() {
  const links = document.querySelectorAll("a");
  links.style.textDecoration = "underline";
}

Código HTML:

<button onclick="underlineLinks()">Underline</button>

Código PHP en el archivo functions.php:

function underline_links() {
  wp_enqueue_script( 'js-file', get_stylesheet_directory_uri() . '/js/underline.js');
}
add_action('wp_enqueue_scripts', 'underline_links');

  • querySelectorAll devuelve una matriz como resultado. Tienes que recorrerlos para acceder a cada uno de sus style propiedades y establecerlas individualmente.

    – Taplar

    26 mayo 2020 a las 17:50

  • stackoverflow.com/questions/10693845/… <= eligió el duplicado incorrecto. este debe ser el duplicado

    – Taplar

    26 mayo 2020 a las 17:51

  • Sería mucho más fácil agregar una clase al <body> y usa una regla CSS.

    – Puntiagudo

    26 mayo 2020 a las 17:52

1647534907 87 ¿Como agrego un subrayado para todos los enlaces en el
lain

No es realmente una explicación de la causa del problema en cuestión, pero ya hay suficientes aquí.

Hacerlo con css en todo el documento o cuerpo parece más simple que recorrer cada elemento por separado.

window.onload = function(){
  document.getElementById('on').onclick = function(){
    document.body.classList.add('underline');
  };
  
  document.getElementById('off').onclick = function(){
    document.body.classList.remove('underline');
  }
}
a{text-decoration: none}
body.underline a{text-decoration: underline}
<a>link 1</a>
<a>link 2</a>
<a>link 3</a>

<button id = 'on'>on</button>
<button id = 'off'>off</button>

En general, trataría de evitar el uso de la style properties de HTMLElements e intente trabajar con clases/atributos en su lugar.

Edite, según lo solicitado:

a{text-decoration: none}
body.underline a{text-decoration: underline}
<a>link 1</a>
<a>link 2</a>
<a>link 3</a>

<button onclick = "document.body.classList.toggle('underline')">toggle</button>

  • Ok, gracias por tu ayuda. ¿Y cómo sería si tuviera que haber un botón en el diseño?

    – nsog8sm43x

    26 de mayo de 2020 a las 18:24

  • Utilizar document.body.classList.toggle('underline').

    – Lain

    26 mayo 2020 a las 18:26


Está intentando agregar un estilo en línea a la colección de enlaces devueltos por .querySelectorAll(). Pero esa colección no tiene un style propiedad. En su lugar, recorra todos los enlaces de la colección. al hacer clic en el botón y alternar el uso de una clase CSS.

// When the button is clicked...
document.querySelector("button").addEventListener("click", function(){
  // Find all the <a> elements and loop over the collection of them
  document.querySelectorAll("a").forEach(function(link){
    // Instead of working with inline styles (the style property),
    // just add or toggle the use of a pre-made CSS class. I'm using
    // toggle here, but if you just want the class added use .add("underline")
    // instead.
    link.classList.toggle("underline");
  });
});
a { text-decoration:none; }
.underline { text-decoration:underline; }
<a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum <a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum 2<a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum 
<a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum <a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum <a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum 
<a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum 
<div>
  <button>Click to toggle underline</button>
</div>

  • OK, ¿qué pasa si quiero que los estilos para el selector “a” se usen como en línea?

    – nsog8sm43x

    26 mayo 2020 a las 18:21

  • @ nsog8sm43x Luego use el código en línea original que tenía link.style.textDecoration = "underline";pero a menos que tenga alguna razón específica para necesitarlo, no se recomienda.

    –Scott Marcus

    26 mayo 2020 a las 18:41

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad