参考资料

1. HTML DOM 返回图像映射的某个区域的pathname 实例
2. HTML DOM改变表格的cellpadding和cellspacing
3. HTML DOM 返回一个iframe中的longdesc属性的值
4. HTML DOM 返回文档中的图像数
5. HTML DOM改变单元格横跨的列数(colspan属性)
6. HTML DOM 返回一个button的name 实例
7. HTML DOM改变表格边框的宽度
8. HTML DOM 返回一个表单acceptCharset属性的值

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