参考资料

1. HTML DOM 节点列表长度
2. HTML DOM 根节点childNodes 和 nodeValue
3. HTML DOM对单个单元格的内容垂直对齐
4. HTML DOM改变单元格横跨的列数(colspan属性)
5. HTML DOM添加表格行中的单元格
6. HTML DOM改变下拉列表中被选中的选项的文本
7. HTML DOM 返回文档中表单数目
8. HTML DOM 导航节点关系

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。