参考资料

1. HTML DOM 获取第一个链接ID的实例
2. HTML DOM 对image排版
3. HTML DOM 返回图像映射的某个区域的shape 实例
4. HTML DOM 节点列表长度
5. HTML DOM 返回页面上所有相对URL的基URL 实例
6. HTML DOM 返回文档中的链接数
7. HTML DOM 返回一个button的value 实例
8. HTML DOM改变表格的cellpadding和cellspacing

HTML DOM 图像映射区域 pathname 属性

介绍

pathname 属性返回图像映射中某个区域的路径部分（即 URL 中域名之后的部分）。

标签

与 <area> 标签相关，该标签定义图像映射中的可点击区域。

用法

var path = areaObject.pathname;

实例

<img src="planets.jpg" usemap="#planetmap" alt="Planets">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" 
    href="venus.html" alt="Venus">
</map>

<script>
  var area = document.getElementById("venus");
  console.log(area.pathname); // 输出: "/venus.html"
</script>

功能

• 获取图像映射区域链接的路径部分

• 可用于动态修改或检查区域链接

• 返回的值不包括协议、域名或查询字符串

CSS 扩展

虽然 CSS 不能直接操作 pathname 属性，但可以基于路径名来设置样式：

/* 假设有 data-path 属性存储路径 */
area[data-path="/venus.html"] {
  outline: 2px solid red;
}

JavaScript 中可以这样设置：

area.setAttribute('data-path', area.pathname);