参考资料

1. HTML DOM 节点列表长度
2. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例
3. HTML DOM 返回和设置链接的charset属性实例
4. HTML DOM 修改 HTML 内容
5. HTML DOM 返回图像映射某个区域的坐标实例
6. HTML DOM一个单元格的innerHTML
7. HTML DOM 返回页面上所有相对URL的基URL 实例
8. HTML DOM 返回一个iframe中的longdesc属性的值

HTML DOM 返回image的替代文本

HTML DOM 返回 image 的替代文本

简介

HTML DOM 提供了获取和设置图像替代文本的方法，主要通过 alt 属性实现。

相关标签

• <img> - 用于嵌入图像的主要HTML标签

主要属性和方法

1. alt 属性

• 获取/设置图像的替代文本

• 语法：imageObject.alt

2. title 属性

• 获取/设置图像的提示文本

• 语法：imageObject.title

用法

// 获取图像的替代文本
var altText = document.getElementById("myImage").alt;

// 设置图像的替代文本
document.getElementById("myImage").alt = "新的替代文本";

实例

<img id="logo" src="logo.png" alt="公司标志">

<script>
// 获取替代文本
console.log(document.getElementById("logo").alt); // 输出: "公司标志"

// 修改替代文本
document.getElementById("logo").alt = "新公司标志";
</script>

功能

• 为视觉障碍用户提供图像描述

• 当图像无法加载时显示替代文本

• 提高SEO优化

CSS扩展

/* 当图像加载失败时显示替代文本的样式 */
img {
  font-family: Arial;
  font-size: 12px;
  color: #333;
}

/* 为带有alt属性的图像添加特殊样式 */
img[alt] {
  border: 1px solid #ccc;
}

/* 鼠标悬停时显示title文本的样式 */
img:hover::after {
  content: attr(title);
  position: absolute;
  background: #fff;
  padding: 5px;
  border: 1px solid #000;
}