如何在 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 的端口值。

更新于: 2022-09-14

349 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告