通过js暴力实现图片ALT属性显示
3个月前
原创
超过106天
温馨提示
本文最后更新于2024年10月03日，已超过106天没有更新，若内容或图片失效，请留言反馈。
今天不是小更新了一下主题模板吗？也是好久没有搞新奇玩意了，突发奇想想给图片添加一个可见描述。
问题是博主也不会，一开始也十分的麻爪，现在都是科技时代了，遇事情不要慌。有问题直接上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);
}
}
});
0 赞
or 打赏
喜欢就打赏一点
上一篇
