参考资料

1. HTML DOM 返回图像映射的某个区域的target的值 实例
2. HTML DOM为表格指定规则
3. HTML DOM 元素
4. HTML DOM单元格内容垂直对齐
5. HTML DOM shift键被按下了吗？
6. HTML DOM 返回image的name
7. HTML DOM改变表格边框的宽度
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> 元素来应用视觉反馈。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。