js暴力实现图片ALT属性显示

今天不是小更新了一下主题模板吗？也是好久没有搞新奇玩意了，突发奇想想给图片添加一个可见描述。
问题是博主也不会，一开始也十分的麻爪，现在都是科技时代了，遇事情不要慌。有问题直接上AI智能，让AI帮忙写一个实例代码，在慢慢动手尝试，有问题解决不了的时候再让AI帮忙你解决，如果一次解决不了就把大问题分解成小问题在交给AI处理。

效果截图

![ALT属性显示截图效果][1]

下面就是今天让AI写的一个简单代码，反正够用就行。至于css样式就需要自行解决了。

// 获取所有带有 class "lazyload" 的 img 元素<br />
const images = document.querySelectorAll('.xm-view-body img.lazyload');<br />
<br />
// 遍历所有 img 元素<br />
images.forEach((imgElement, index) => {<br />
if (!imgElement.classList.contains('biaoqing')) {<br />
// 获取 alt 属性的值<br />
const altValue = imgElement.getAttribute('alt') || '';<br />
<br />
// 判断 alt 属性的值是否为空<br />
if (altValue.trim() !== '') {<br />
// 创建一个 div 并设置其内容<br />
const altDiv = document.createElement('div');<br />
altDiv.textContent = altValue;<br />
<br />
// 为每个 div 添加一个唯一的 id 和类名<br />
altDiv.id = `altText${index}`;<br />
altDiv.className = 'xm-img-alt';<br />
<br />
// 将 div 添加到 img 元素后面<br />
imgElement.parentNode.insertBefore(altDiv, imgElement.nextSibling);<br />
}<br />
}<br />
});<br />
```<br />
<br />
<br />
[1]: https://pic2.ziyuan.wang/user/xunm/2024/10/%E7%81%AB%E7%8B%90%E6%88%AA%E5%9B%BE_2024-10-03T12-35-22.192Z_9f1c0efbc0698.png