資料結構
網路
關係型資料庫管理系統
作業系統
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.tw"> 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.tw" 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.tw" 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 次瀏覽
