如何在JavaScript中获取区域元素href属性的hash部分？

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

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

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

以下是使用JavaScript获取区域元素href属性hash部分的方法：

使用HTML DOM Area hash 属性

在HTML DOM中，DOM Area get hash属性用于返回href属性值的锚部分。锚部分是URL中井号(#)之后的部分。

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

语法

area_object.hash;

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

示例1

在这个例子中，我们使用了hash属性来获取href属性的hash部分。id为"area_javascript"的区域具有href属性，使用hash属性时将返回其hash后的文本（包括hash）。

<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 hash 属性

使用此hash属性，可以设置href属性值的锚部分。井号(#)之后是URL锚点。要设置锚点，请移除井号(#)。

语法

area_object.hash = anchor_name;

调用了area_object，并将锚部分的hash值设置为不同的值，如anchor_name所示。

示例2

在这个例子中，我们使用了hash属性来更改URL的锚部分。使用hash属性找到hash值，然后相应地更改文本。

<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属性hash部分的方法。第一种方法是使用hash属性。在第二种方法中，我们使用不同的值设置hash属性，然后访问更新后的hash值。

更新于：2022年9月14日

584 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告