数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 移除链接的下划线？
当我们在 HTML 中使用 <a> 标签时，它会在网页上显示带有下划线的锚文本。有时，下划线看起来非常烦人，我们需要使用 JavaScript 移除它。
style 对象的 ‘textDecoration’ 属性允许开发人员从锚文本中移除下划线。此外，开发人员可以使用 ‘textDecoration’ CSS 属性的不同值以不同的方式设置文本样式。
语法
用户可以按照以下语法使用 textDecoration CSS 属性，通过 JavaScript 移除链接的下划线。
x.style.textDecoration = "none";
在上述语法中，我们将 textDecoration 属性的值设置为 ‘none’ 以移除下划线。
示例 1
在下面的示例中，我们创建了 <a> 标签，它指向 TutorialsPoint 网站的主页。我们创建了按钮，并在用户点击它时执行 removeline() 函数。
在 removeline() 函数中，我们使用标签名称选择 <a> 标签。然后，我们访问 ‘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://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 中，我们在按钮上添加了事件监听器，该监听器在每次发生点击事件时执行回调函数。在回调函数中，我们从网页中访问锚标签，并为 style 对象的 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://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 中，我们在每个单选按钮上添加了一个点击事件。每当用户点击任何单选按钮时，我们都会访问其值并将其设置为 textDecoration 属性的值。在输出中，用户可以选择不同的单选按钮并观察锚文本的变化。
<html>
<body>
<h3> Using the <i> text-decoration property </i> to remove the underline from the link using JavaScript </h3>
<a href = "https://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 属性设置其他值。
959 次浏览
