参考资料

1. HTML DOM 对image排版
2. HTML DOM 返回文档中第一个图像的ID
3. HTML DOM 获取第一个链接ID的实例
4. HTML DOM 返回文档中第一个表单的名字
5. HTML DOM为表格指定规则
6. HTML DOM 返回一个button所属表的ID 实例
7. HTML DOM获得下拉列表的选项数量
8. HTML DOM 返回一个表单的name 实例

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

HTML DOM 图像映射区域 hostname 属性

详细介绍

hostname 属性返回图像映射中某个区域(<area>)的 URL 的主机名部分。它是 HTML DOM Area 对象的属性之一。

标签

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

用法

var hostnameValue = areaObject.hostname;

实例

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="rect" coords="0,0,82,126" href="https://www.example.com/venus">
</map>

<script>
  var areaObj = document.getElementById("venus");
  console.log(areaObj.hostname); // 输出: "www.example.com"
</script>

功能

• 返回 URL 的主机名部分（不包括协议、端口或路径）

• 如果 URL 没有指定主机名，则返回空字符串

• 可用于分析和验证图像映射中区域的链接目标

CSS 扩展

虽然 hostname 是 DOM 属性而非 CSS 属性，但可以通过 CSS 选择器结合 JavaScript 来基于主机名设置样式：

// 根据主机名设置样式
var areas = document.querySelectorAll('area');
areas.forEach(function(area) {
  if(area.hostname === 'www.example.com') {
    area.style.outline = '2px solid red'; // 注意：area 元素本身不可见
  }
});

注意：由于 <area> 元素本身不可见，通常需要通过其父 <map> 或相关 <img> 元素来应用视觉反馈。