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

首页 » 休闲 » 正文内容

原创

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

寻梦xunm| 182| 休闲

6个月前

超过182天温馨提示

本文最后更新于2024年10月03日，已超过182天没有更新，若内容或图片失效，请留言反馈。

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

效果截图

ALT属性显示截图效果

下面就是今天让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);
    }
}
});

教程源码 js 代码

本站相关资源来自互联网用户收集发布，仅供用于学习和交流。如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！

0 赞 or 打赏

喜欢就打赏一点

简单更新一下主题模板水文

白嫖每月50TB流量的BGP线路CDN可重复注册

服务器服务器

教程207 typecho164 代码151 模板127 源码118 php90 css75 主题75 图片70 游戏61 原创49 html44 js43 免费39 程序35 动漫34 攻略31 视频31 手办30 周边30 美化28 特效24 评论23 拍摄23 插件19 导航19 样式19 手游18 函数17 音乐17 加载16 开发15 软件14 wp14 mysql13 福利13 标签12 主页12 简单12 头像12 文章11 emlog11 吐槽11 应用10 表情10 自动10 页面10 农村9 白嫖9 微信9 接口9 网址9 字体8 编辑器8 列表8 切换8 原神8 网盘8 小程序8 优化8 更新8 api8 时间7 博客7 链接7 Vue7