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

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

效果截图

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

 // 获取所有带有 class "lazyload" 的 img 元素
 const images = document.querySelectorAll('.xm-view-body img.lazyload');

// 遍历所有 img 元素
images.forEach((imgElement, index) => {
    if (!imgElement.classList.contains('biaoqing')) {
    // 获取 alt 属性的值
    const altValue = imgElement.getAttribute('alt') || '';

    // 判断 alt 属性的值是否为空
    if (altValue.trim() !== '') {
        // 创建一个 div 并设置其内容
        const altDiv = document.createElement('div');
        altDiv.textContent = altValue;

        // 为每个 div 添加一个唯一的 id 和类名
        altDiv.id = `altText${index}`;
        altDiv.className = 'xm-img-alt';

        // 将 div 添加到 img 元素后面
        imgElement.parentNode.insertBefore(altDiv, imgElement.nextSibling);
    }
}
});