极客笔记JavaScript 如何去除链接的下划线
每当我们在HTML中使用标签时，它会在网页上显示带有下划线的锚文本。有时，下划线看起来非常让人讨厌，我们需要使用JavaScript去除下划线。
style对象的’textDecoration’属性允许开发者去除锚文本中的线条。开发者还可以使用不同的值来为’textDecoration’ CSS属性添加不同的文本样式。
语法
用户可以按照下面的语法使用textDecoration CSS属性来使用JavaScript去除链接的下划线。
x.style.textDecoration = "none";
在上面的语法中，我们将textDecoration属性的值设置为’none’以去除下划线。
示例1
在下面的示例中，我们创建了用于定位TutorialsPoint网站首页的标签。我们创建了按钮，并在用户单击按钮时执行removeline()函数。
在removeline()函数中，我们使用标签名选中标签。然后，我们访问’style’对象并将textDecoration属性的值更改为’none’，以去除下划线。
输出中，用户可以单击按钮来去除锚文本的下划线。
<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>
示例2
我们在下面的示例中使用HTML在网页上添加了<a>标签和按钮。在JavaScript中，我们在按钮上添加了事件监听器，当点击事件发生时执行回调函数。在回调函数中，我们从网页中获取锚点标签，并为样式对象的textDecoration属性设置‘line-through’的值。
在输出中，用户可以观察到在点击按钮后，文本上方出现了一条线，而不是下方。
<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>
示例3
在下面的示例中，我们创建了多个单选按钮，允许用户选择textDecoration属性的值。在这里，我们允许用户选择textDecoration属性的4个不同值：none（无），line-through（删除线），overline（上划线）和underline（下划线）。
在JavaScript中，我们为每个单选按钮添加了一个click事件。每当用户点击任何单选按钮时，我们访问其值，并将其设置为textDecoration属性的值。在输出中，用户可以选择不同的单选按钮并观察锚文本的变化。
<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>
用户学会了通过使用style对象的textDecoration属性来移除链接中的下划线。我们可以完全移除锚文本中的下划线，或为textDecoration属性设置另一个值。