How to remove underline from link using JavaScript ?
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: This example shows the use of the above-explained approach.
html
<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> |
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: This example shows the use of the above-explained approach.
html
<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> |
Output:
Please Login to comment...