参考资料

1. HTML DOM 返回图像映射某个区域的坐标实例
2. HTML DOM 哪个事件发生了？
3. HTML DOM 对image排版
4. HTML DOM 返回图像映射的某个区域的href 实例
5. HTML DOM 返回一个锚的名字 实例
6. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
7. HTML DOM 返回一个表单的name 实例
8. HTML DOM 返回一个button的type 实例

HTML DOM 返回image的longdesc属性的值

HTML DOM image longdesc 属性

简介

longdesc 属性用于指定一个指向图像详细描述的链接，通常用于为屏幕阅读器等辅助技术提供更详细的图像描述。

标签用法

<img src="image.jpg" longdesc="description.html" alt="简短描述">

功能

• 提供图像的长文本描述

• 增强可访问性

• 适用于复杂图表、图形等需要详细说明的图像

DOM 访问

// 获取 longdesc 属性值
var longDesc = document.getElementById("myImage").longDesc;

// 设置 longdesc 属性值
document.getElementById("myImage").longDesc = "new-description.html";

实例

<img id="chart" src="sales-chart.png" 
     alt="2023年销售图表" 
     longdesc="sales-chart-description.html">

<script>
  // 获取描述链接
  var descLink = document.getElementById("chart").longDesc;
  console.log("详细描述位于: " + descLink);
</script>

CSS 扩展

虽然 longdesc 本身没有特定的 CSS 属性，但可以通过 CSS 增强其可视化提示：

img[longdesc] {
  border: 1px dotted blue;
}

img[longdesc]::after {
  content: " (有详细描述)";
  font-size: smaller;
  color: gray;
}

注意事项

• HTML5 中已不推荐使用 longdesc 属性

• 现代替代方案是使用 <figure> 和 <figcaption> 或 ARIA 属性

• 仍然被一些屏幕阅读器支持