資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中查詢連結的 href 和 target 屬性？
首先，讓我們瞭解一下屬性在 JavaScript 中是如何工作的。任何元素的屬性都可以用 JavaScript 更改。attributes 屬性儲存它們，呼叫它可以讓你直接訪問它們。如果我們用一個類來定位一個元素，這個類也會顯示為一個屬性，我們實際上可以使用這些屬性方法來更改類，如果我們這樣選擇的話。現在，請記住，雖然我們已經為類指定了屬性和方法，但如果需要，你也可以使用所有這些特性來操作任何元素中的類。
JavaScript 中的 href 屬性
在錨標記的 href 屬性中，HTML 允許放置連結。因此，在開發基於 JavaScript 的應用程式時，必須動態構建連結並將它們分配給 HTML 錨元素的 href 屬性，在這些應用程式中，必須以程式設計方式管理所有內容。
這是你需要 JavaScript 來構建連結的主要原因，這也是我們將在本文中討論的內容。話雖如此，讓我們更仔細地看看如何使用 JavaScript 快速構建連結。
建立 href 屬性需要記住的重要事項
建立一個錨元素 <a>。
建立一個文字節點，其中包含一些將顯示為連結的文字。
文字節點應新增到錨 <a>元素中。
設定 <a> 元素的標題和 href 屬性。
在主體中新增 <a> 元素。
示例 1
在這個例子中，讓我們瞭解如何使用 javaScript 建立連結。我們必須首先使用 javaScript 構建一個錨標記。我們可以使用下面給出的程式碼來建立錨點。我們稍後會需要它，所以建立一個元素（使用 < a> 標記）並將其分配給變數“myAnchor” - 下面提供的程式碼可用於建立錨點。建立一個元素（使用 < a> 標記）並將其分配給“anchor”變數。下一行的 javaScript 程式碼將用於將連結放置在 < a> 標記的 href 屬性中。
<!DOCTYPE html> <html> <title>How to find the href and target attributes in a link in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>Click to view my website</p> <script> let myAnchor = document.createElement('a'); let textToLink = document.createTextNode("Tutorialspoint Website"); myAnchor.appendChild(textToLink); myAnchor.href = "https://tutorialspoint.tw/"; document.body.appendChild(myAnchor); </script> </body> </html>
示例 2
在這個例子中，讓我們瞭解節點是如何建立的，以及屬性是如何由 JavaScript 方法設定的。
<!DOCTYPE html> <html> <title>How to find the href and target attributes in a link in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>To generate a link using JavaScript, press the button.</p> <button onclick = "myFun()"> Click Me </button> <script> function myFun() { let x = document.createElement('a'); let textTolink = document.createTextNode("This is link"); x.appendChild(textTolink); x.title = "This is Link"; x.href = "https://tutorialspoint.tw/"; document.body.appendChild(x); } </script> </body> </html>
JavaScript 中的 target 屬性
這裡讓我們瞭解一下 JavaScript 中的 target 屬性。當用戶點選連結時，HTML target 屬性指定連結的文件將在其中開啟。如果使用錨元素指定了 target="blank"，則連結的文件將在新標籤頁中開啟；否則，它將在現有標籤頁中開啟。
有兩種方法可以執行此任務。一種是傳統且冗長的方式，它涉及在 HTML 標記內編寫 target="blank" 屬性。Javascript 程式碼執行是另一種更實用的方法。
我們首先將開發一個事件函式，該函式在每次點選後呼叫，如果存在錨標記但未給出 target 屬性，則將 target 屬性設定為“_blank”。
示例 3
以下 JavaScript 示例演示瞭如何使用 target="blank" -
<!DOCTYPE html> <html> <title>How to find the href and target attributes in a link in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <a href="https://tutorialspoint.tw/"> Tutorialspoint<br> Online tutorials library offering and easy learning on IT & software topic </a> <script> document.addEventListener("click", function(t) { if (t.target.tagName == "B" && !t.target.hasAttribute("target")) { t.target.setAttribute("target", "_blank"); } }); </script> </body> </html>
6K+ 次檢視
