How to change the color of the links and remove underline from link with javascript?

Jeśli chcesz dowiedzieć się, jak usunąć podkreślenie i zmienić kolor linku za pomocą CSS, zobacz wpis: Jak usunąć podkreślenie hiperłącza (linku) za pomocą CSS ?

Aby usunąć na stałe podkreślenie z linku oraz zmienić jego kolor za pomocą JavaScript wystarczy, że przypiszesz pojedynczemu linkowi odpowiednie id i podstawisz go pod zmienną, a następnie nadasz mu odpowiednie właściwości :

const link = document.getElementById("myLink");

link.style.textDecoration = "none";
link.style.color = "red"; 

Przywrócenie podkreślenia po najechaniu myszką na link jest już nieco bardziej kodo-chłonne:

link.addEventListener("mouseenter", function() {
   link.classList.add("hover");
})

link.addEventListener("mouseout", function() {
   link.classList.remove("hover");
})

CSS:

.hover {
   text-decoration: underline;
} 

Lub:

link.addEventListener("mouseenter", function() {
   link.style.textDecoration = "underline";
})

link.addEventListener("mouseout", function() {
   link.style.textDecoration = "none";
})

Powyższy przykład w JavaScript pokazuje, jak usunąć i przywrócić podkreślenie z pojedynczego linku. A co w przypadku, kiedy chcemy ustawić taki wygląd dla wszystkich linków na stronie? Wystarczy pobrać linki za pomocną jednej z metod (np. getElementsByTagName lub getElementsByClassName) i zrobić po nich pętlę:

const link = document.getElementsByTagName("a");

for (i=0;  i < link.length;  i++) {
   link[i].style.textDecoration = "none";
   link[i].style.color = "red";
} 

i z przywróceniem podkreślenia:

for (i=0;  i < link.length;  i++) {
   link.addEventListener("mouseenter", function() {
      link.style.textDecoration = "underline";
   })

   link.addEventListener("mouseout", function() {
      link.style.textDecoration = "none";
   })
}