参考资料

1. HTML DOM 返回image的name
2. HTML DOM 返回一个iframe中的frameborder属性的值
3. HTML DOM 改变链接的target属性实例
4. HTML DOM 改变一个iframe的src
5. HTML DOM 给image加上border
6. HTML DOM 修改 HTML 内容
7. HTML DOM 创建一个链接指向一个低分辨率的image
8. HTML DOM 提交表单

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 属性

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