📌  相关文章
📜  HTML | DOM 地图名称 属性(1)

📅  最后修改于: 2023-12-03 15:15:36.197000             🧑  作者: Mango

HTML | DOM 地图名称 属性

简介

在 HTML 中，可以使用 <map> 元素来定义一个图片映射。该元素包含多个 <area> 元素，每个 <area> 元素表示图片上的一个热点区域。地图名称属性（name）用于为地图定义一个标识符，使得用户可以通过 JavaScript 查找和操纵该地图。

语法

地图名称属性的语法如下：

<map name="map_name">
  <!-- 该地图包含多个 <area> 元素 -->
  <area shape="rect" coords="0,0,100,100" href="https://example.com">
</map>
属性值

name 属性需要一个字符串值，该字符串作为地图的标识符。该值应该是唯一的，而且只能包含字母、数字或下划线。大多数浏览器限制名称长度不能超过 128 个字符。

实例

以下示例展示了如何通过 JavaScript 找到 HTML 中的地图，并向其添加一个新的区域：

<body>
  <img src="map.jpg" usemap="#map">
  <map name="map">
    <area shape="rect" coords="0,0,100,100" href="#">
  </map>
  <script>
    var map = document.getElementsByName("map")[0];
    var newArea = document.createElement("area");
    newArea.setAttribute("shape", "rect");
    newArea.setAttribute("coords", "100,100,200,200");
    newArea.setAttribute("href", "#");
    map.appendChild(newArea);
  </script>
</body>
注意事项
  • 地图名称属性只能在 <map> 元素中使用。
  • 该属性值应该是唯一的，在同一页面中不能有重复的名称。
  • 在 JavaScript 中，可以使用 document.getElementsByName("map_name") 方法来获取指定名称的地图元素。