参考资料

1. HTML DOM 返回一个区域的href属性的querystring部分 实例
2. HTML DOM对单个单元格的内容水平对齐
3. HTML DOM弹出下拉列表中被选中的选项的索引
4. HTML DOM 返回图像映射的某个区域的pathname 实例
5. HTML DOM 重置表单
6. HTML DOM 返回image的替代文本
7. HTML DOM 返回图像映射的某个区域的href 实例
8. HTML DOM 返回一个锚的名字 实例

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;
}