参考资料

1. HTML DOM 返回文档中第一个表单的名字
2. HTML DOM 返回image的替代文本
3. HTML DOM 返回和设置一个iframe中的scrolling属性的值
4. HTML DOM为表格创建一个标题
5. HTML DOM 访问
6. HTML DOM 返回一个锚的名字 实例
7. HTML DOM 返回文档的标题实例
8. HTML DOM 改变一个包含在iframe中的文档的背景颜色

HTML DOM 返回图像映射的某个区域的pathname 实例

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);