• Home
  • JavaScript
  • Jak usunąć podkreślenie hiperłącza (linku) za pomocą JavaScript?

Jak usunąć podkreślenie hiperłącza (linku) za pomocą JavaScript?

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";
   })
} 

Joanna

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *