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...