Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to remove underline from link using JavaScript?
Whenever we use <a> tag in the HTML, it shows the anchor text with the underline on the web page. Sometimes, underlining looks very annoying, and we require to remove the underline from JavaScript.
The ‘textDecoration’ property of the style object allows developers to remove the line from the anchor text. Also, developers can use different values for the ‘textDecoration’ CSS property to style text in different ways.
Syntax
Users can follow the syntax below to use the textDecoration CSS property to remove the underline from the link using JavaScript.
x.style.textDecoration = "none";
In the above syntax, we set the ‘none’ value for the textDecoration property to remove the underline.
Example 1
In the example below, we created the <a> tag targeting the home page of TutorialsPoint’s website. We created the button and executed the removeline() function whenever users clicked it.
In the removeline() function, we select the <a> tag using the tag name. After that, we access the ‘style’ object and change the value of the textDecoration property to ‘none’ to remove the line.
In the output, uesrs can click the button to remove the underline from the anchor text.
<html>
<body>
<h3> Using the <i> text-decoration property </i> to remove the underline from the link using JavaScript </h3>
<a href = "https://www.TutorialsPoint.com"> TutorialsPoint </a>
<button onclick = "removeline()"> Remove underline </button>
<script>
function removeline() {
var x = document.getElementsByTagName("a")[0];
x.style.textDecoration = "none";
}
</script>
</html>
Example 2
We added the <a> tag and button on the web page using HTML in the example below. In JavaScript, we added the event listener on the button, which executes the callback function whenever a click event occurs. In the callback function, we access the anchor tag from the web page and set the ‘line-through’ value for the textDecoration property of the style object.
In the output, users can observe a line over the text instead of a line under the text after clicking the button.
<html>
<body>
<h3> Using the <i> text-decoration property </i> to remove the underline from the link using JavaScript </h3>
<a href = "https://www.TutorialsPoint.com" style="font-size: 1.4rem;"> TutorialsPoint </a><br> <br>
<button id = "btn"> set line-through </button>
<script>
let btn = document.getElementById("btn");
btn.addEventListener("click", function () {
let x = document.getElementsByTagName("a")[0];
x.style.textDecoration = "line-through";
});
</script>
</html>
Example 3
In the example below, we created multiple radio buttons allowing users to choose a value of the textDecoration property. Here, we allow users to choose 4 different values for the textDecoration property: none, line-through, overline, and underline.
In JavaScript, we added a click event to every radio button. Whenever users click on any radio button, we access its value and set it as a value of the textDecoration property. In the output, users can select the different radio buttons and observe the changes in the anchor text.
<html>
<body>
<h3> Using the <i> text-decoration property </i> to remove the underline from the link using JavaScript </h3>
<a href = "https://www.TutorialsPoint.com" style = "font-size: 1.4rem;"> TutorialsPoint </a> <br> <br>
<!-- radio button allowing users to select different text decorations for links -->
<input type = "radio" name = "text-decoration" id = "none" value = "none"> None
<input type = "radio" name = "text-decoration" id = "underline" value = "underline" checked> Underline
<input type = "radio" name = "text-decoration" id = "overline" value = "overline"> Overline
<input type = "radio" name = "text-decoration" id = "line-through" value = "line-through"> Line-through
<script>
// adding event listener to the radio buttons
document.querySelectorAll('input[type=radio]').forEach((item) => {
item.addEventListener('click', () => {
// getting the value of the radio button
var textDecoration = item.value;
// getting the link element
var link = document.querySelector('a');
// setting the text-decoration property of the link
link.style.textDecoration = textDecoration;
})
})
</script>
</html>
Users learned to remove the underline from the link using the textDecoration property of the style object. We can remove the underline totally from the anchor text or set another value for the textDecoration property.
615 Views
