参考资料

1. HTML DOM 返回一个button的value 实例
2. HTML DOM 返回一个表单中所有元素的value 实例
3. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例
4. HTML DOM 获取第一个链接ID的实例
5. HTML DOM 返回一个锚的名字 实例
6. HTML DOM一个单元格的innerHTML
7. HTML DOM 返回文档中第一个图像的ID
8. HTML DOM 元素

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> 元素来应用视觉反馈。