如何在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 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.