資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中獲取區域 href 屬性的埠號部分？
在本教程中，我們將瞭解如何在 JavaScript 中獲取區域 href 屬性的埠號。
區域是 JavaScript 中的一個標籤。此標籤寫為 <area>。此標籤表示影像對映內的區域。此標籤沒有結束標籤。因此，在 HTML 中，這是一個空標籤。在 XHTML 中，此標籤必須正確關閉。
影像對映也是另一個標籤。此標籤寫為 <map> </map>。影像對映包含一個帶有可點選或活動區域的影像。
area 標籤位於 map 標籤內。此標籤將在 href 屬性中設定一個連結。當用戶點選該區域時，使用者將導航到該 URL。這可以是開啟影像、開啟網站等。
<img> 標籤和 <map> 標籤透過其屬性連結。具有 usemap 屬性的 <img> 標籤與 <map> 標籤中的 name 屬性連線。這兩個屬性的值將相同。單個影像對映可以在其中包含多個 area 標籤。
支援 area 標籤的瀏覽器包括 Google Chrome、Edge 12 及更高版本、Internet Explorer、Mozilla Firefox 1 及更高版本、Opera 和 Safari。
語法
<area shape="" coords="" href="">
這是 area 標籤的一些屬性的語法
屬性
coords − 它表示區域的座標。
其值為座標
示例 − rect(left, top, right, bottom)
− circ(center1, center2, radius)
− poly(x1, y1, x2, y2,…xn, yn)
這些值是 CSS 畫素。
href − 此屬性表示區域的 href 連結。
其值為一個 URL。
shape − 此屬性指定區域的形狀。
其值為 default、rect、circ 和 poly。
示例 − 矩形、圓形、正方形和多邊形。
除了這些引數外，area 標籤還支援 HTML 中的全域性屬性。例如，class 和 title。事件屬性也受支援。例如，onclick 和 onkeypress。大多數瀏覽器使用以下 CSS 隱藏 area 標籤。
area { display: none;}
已棄用的屬性為 nohref、name、tabindex 和 type。
接下來，我們將瞭解如何在 area 標籤中獲取 href 屬性的埠值。使用 port 屬性
使用 port 屬性
在這裡，我們將研究 port 屬性的工作原理。href 屬性的埠部分由 port 屬性設定。如果未在 URL 中設定，某些瀏覽器將顯示 0 或沒有任何內容。在這種情況下，將設定預設埠。80 或 443 是預設埠。
語法
areaObj.port;//get areaObj.port = port;//set
這裡，第一個語法用於獲取埠，第二個語法用於設定埠。返回值是字串。
引數
port − port 是 URL 的埠號
示例 1
這裡，我們有一個影像對映。我們使用 getPort 方法使用 port 屬性獲取 href 屬性的埠值，並顯示輸出。
<html> <body> <h4>Get the port number of href attribute in an area using <i> port </i> property </h4> <img src="" width="" height="" usemap="#imagemap"> <map name="imagemap"> <area id = "areaid" shape = "circle" cords = "100,50,25" href = "https://tutorialpoints.com"> </map> <p id="displayid"> </p> <script> function getPort() { var portVal = document.getElementById("areaid").port || undefined; document.getElementById("displayid").innerHTML = "Port " + portVal; } getPort(); </script> </body> </html>
示例 2
這裡，我們有一個影像對映。我們使用 setPort 方法使用 port 屬性設定 href 屬性的埠值，並顯示輸出。
<html> <body> <h4> Set the port number of href attribute in an area using <i> port </i> property</h4> <img src="" width="" height="" usemap="#imagemap"> <map name="mapimage"> <area id="idarea" shape="circle" coords="200,100,50" href="https://tutorialpoints.com"> </map> <p id="iddisplay"></p> <script> function setPort() { var areaEl = document.getElementById("idarea"); areaEl.port = "1234"; var portVal = areaEl.port; document.getElementById("iddisplay").innerHTML = "Port Set " + portVal; } setPort(); </script> </body> </html>
本文幫助我們瞭解了 area 標籤的 port 屬性。我們學習瞭如何使用其 port 屬性獲取區域中 href 的埠。我們還學習瞭如何使用相同的 port 屬性更改 href 的埠值。
349 次檢視
