参考资料

1. HTML DOM 哪个事件发生了？
2. HTML DOM 哪个元素被按下了？
3. HTML DOM为表格创建一个标题
4. HTML DOM改变下拉列表中被选中的选项的文本
5. HTML DOM获得有下拉列表的表单的ID
6. HTML DOM 返回文档中的所有cookies的名称/值对 实例
7. HTML DOM 返回一个button的value 实例
8. HTML DOM 改变一个iframe的src

HTML DOM 返回的主机名：图像映射的某个区域的端口 实例

HTML DOM 图像映射区域的主机名和端口实例

详细介绍

HTML DOM 中的 area 元素可以通过 hostname 和 port 属性获取或设置图像映射区域链接的主机名和端口部分。

标签

<area>

用法

// 获取主机名
var host = areaElement.hostname;

// 设置主机名
areaElement.hostname = "new.example.com";

// 获取端口
var port = areaElement.port;

// 设置端口
areaElement.port = "8080";

实例

<img src="planets.jpg" usemap="#planetmap" alt="Planets">
<map name="planetmap">
  <area id="earth" shape="rect" coords="0,0,82,126" href="http://example.com:8080/earth" alt="Earth">
</map>

<script>
  var area = document.getElementById("earth");
  console.log(area.hostname); // 输出: "example.com"
  console.log(area.port); // 输出: "8080"
  
  // 修改主机名和端口
  area.hostname = "new.example.org";
  area.port = "3000";
</script>

功能

• hostname 属性返回或设置链接的域名部分

• port 属性返回或设置链接的端口号部分

• 这些属性可用于动态修改图像映射区域的链接目标

CSS 扩展

虽然 area 元素本身不支持直接样式化，但可以通过 CSS 伪类来指示活动状态：

area:focus {
  outline: 2px solid blue;
}

/* 通过 JavaScript 添加类来样式化 */
.highlight-area {
  border: 1px dashed red;
}

注意：area 元素的可视化样式有限，通常需要通过 JavaScript 和 CSS 结合其他元素来实现更丰富的视觉效果。