如何在 JavaScript 中获取区域的 href 属性的哈希部分？

在本教程中，我们将学习如何在 JavaScript 中获取区域的 href 属性的哈希部分。

HTML 元素 <area> 在图像地图中建立了一个具有预定可点击区域的区域。图像地图允许您将图片的几何区域与超文本链接相关联。此元素只能在 < map> 元素内使用。

href 属性提供了区域的超链接目标。如果不存在 href 属性，则 <area> 元素不是超链接。

以下是用于在 JavaScript 中获取区域的 href 属性的哈希部分的方法：

使用 HTML DOM Area 哈希属性

在 HTML DOM 中，DOM Area 获取哈希属性用于返回 href 属性值的锚部分。锚部分是哈希符号 (#) 之后出现的 URL 组件。

它具有一个单值锚名称，指定 URL 的锚部分。它生成一个字符串值，该值反映 URL 的锚部分，包括哈希符号 (#)。

语法

area_object.hash;

使用哈希属性调用 area_object 并返回包含哈希 (#) 的 URL 的锚部分。

示例 1

在此示例中，我们使用了哈希属性来获取 href 属性的哈希部分。id 为 "area_javascript" 的区域具有 href 属性，当使用哈希属性时，其哈希后的文本将被返回（包括哈希）。

<html>
<body>
   <h3>Get the hash part of the href attribute of an area using the <i>hash</i> property</h3>
   <img src="/javascript/images/javascript-mini-logo.jpg"
   alt="javascript_logo"
   usemap="#javascript"
   width="200"
   eight="200">
   <map name = "javascript">
      <area id="area_javascript"
      shape = "rectangle"
      coords = "154,150,59, 0"
      href = "/javascript/index.htm#overview"
      alt = "Team"
      target = "_self" >
   </map>
   <p id = "outputDiv"> </p>
   <script>
      let output = document.getElementById("outputDiv");
      var area1 = document.getElementById("area_javascript").hash;
      output.innerHTML = "Hash : "+area1 +"<br>";
   </script>
</body>
</html>

通过设置 HTML DOM 哈希属性

通过使用此哈希属性，可以设置 href 属性值的锚组件。URL 锚位于哈希符号 (#) 之后。要设置锚，请删除哈希符号 (#)。

语法

area_object.hash = anchor_name;

已调用 area_object，并且锚部分的哈希值已设置为不同的值，如 anchor_name 中所示。

示例 2

在此示例中，我们使用了哈希属性来更改 URL 的锚部分。使用哈希属性查找哈希值，然后相应地更改文本。

<html>
<body>
   <h3>Get the hash part of the href attribute of an area after setting to new has value</h3>
   <img src="/javascript/images/javascript-mini-logo.jpg" alt="javascript_logo"
   usemap="#javascript"
   width="200"
   height="200">
   <map name = "javascript">
      <area id="area_javascript"
      shape = "rectangle"
      coords = "154,150,59, 0"
      href = "/javascript/index.htm#home"
      alt = "Team"
      target = "_self" >
   </map>
   <p id = "outputDiv"> </p>
   <script>
      let output = document.getElementById("outputDiv");
      // set hash property
      document.getElementById("area_javascript").hash = "quick_guide"
      output.innerHTML += "Set Hash : quick_guide"+"<br>";
      var area1 = document.getElementById("area_javascript").hash;
      output.innerHTML += "Hash : "+area1 +"<br>";
   </script>
</body>
</html>

在本教程中，我们学习了在 JavaScript 中获取区域的 href 属性的哈希部分的两种方法。第一种方法是使用哈希属性。在第二种方法中，我们使用不同的值设置哈希属性，然后访问更新的哈希值。

更新于: 2022年9月14日

582 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告