Skip to content
Related Articles

Related Articles

Improve Article

How to remove underline from link using JavaScript ?

  • Last Updated : 23 Apr, 2020

Given a link and the task is to remove the underline from the anchor element with the help of JavaScript. There are two approaches that are discussed below:

Approach 1: Use textDecoration property of JavaScript to perform this operation. It can be set to many values but, in this example it has been set to none.

  • Example:




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            How to remove underline from
            link using JavaScript?
        </title>
    </head>
      
    <body style="text-align:center;">
      
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
      
        <p id="GFG_UP"></p>
      
        <a id="link" href="#">This is Link</a>
          
        <br><br>
      
        <button onclick="GFG_Fun()">
            Click Here
        </button>
          
        <p id="GFG_DOWN"></p>
      
        <script>
            var el_up = document.getElementById('GFG_UP');
            var el_down = document.getElementById('GFG_DOWN');
            el_up.innerHTML = "Click on the button to "
                            + "perform the operation";
                              
            function GFG_Fun() {
                var el = document.getElementById('link');
                el.style.textDecoration = "none";
                el_down.innerHTML = "Underline Removed";
            }
        </script>
    </body>
      
    </html>
  • Output:

Approach 2: Use textDecoration property of JavaScript to perform the operation. But, in this example we are setting the value to line-through.

  • Example:




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            How to remove underline from
            link using JavaScript?
        </title>
    </head>
      
    <body style="text-align:center;">
      
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
          
        <p id="GFG_UP"></p>
      
        <a id="link" href="#">This is Link</a>
          
        <br><br>
        <button onclick="GFG_Fun()">
            Click Here
        </button>
          
        <p id="GFG_DOWN"></p>
      
        <script>
            var el_up = document.getElementById('GFG_UP');
            var el_down = document.getElementById('GFG_DOWN');
            el_up.innerHTML = "Click on the button to "
                            + "perform the operation";
                              
            function GFG_Fun() {
                var el = document.getElementById('link');
                el.style.textDecoration = "line-through";
                el_down.innerHTML = "Underline Removed";
            }
        </script>
    </body>
      
    </html>
  • Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :