如何使用 JavaScript 查找现有图像标记并将属性添加到图像标记答案

【问题标题】：How to find existing and add an attribute to image tag using JavaScript如何使用 JavaScript 查找现有图像标记并将属性添加到图像标记
【发布时间】：2021-10-05 14:59:35
【问题描述】：

我在 HTML 中有下面的标签，它没有类或父 div 来识别，因为它的动态内容将加载到正文中的任何地方。 我的期望是如何找到这个img标签以及如何单独将“alt标签”注入这个图像！？请用javascript帮助我。提前致谢 注意：我在页面中有更多静态图片，我可以添加 alt 标签

<img src="https://i.pinimg.com/originals/12/e2/6d/12e26d72c68442640b27583cff8d50e7.png" width="100" height="100" style="display: block">

【问题讨论】：

用例子分享你的html。

标签： javascript html css

【解决方案1】：

你可以通过src属性选择图片标签：

const image = document.querySelector('img[src="https://i.pinimg.com/originals/12/e2/6d/12e26d72c68442640b27583cff8d50e7.png"]');
image.alt = 'alt tag';
console.log(image);

&lt;img src="https://i.pinimg.com/originals/12/e2/6d/12e26d72c68442640b27583cff8d50e7.png" width="100" height="100" style="display: block"&gt;

【讨论】：

如果图像是动态加载的，那么它在脚本执行时可能不存在吗？
@Frish 我假设 OP 只是想弄清楚如何选择图像。
谢谢。此代码正在运行。除了文件名还有其他方法可以找到标签吗？如果是，那么这对我来说将是更有效的解决方案！
@johny 如果没有类和 id，则通过 src 属性选择是唯一的方法。
@Spectric 谢谢。在这个 img 标签中，我们有 inline (style="display: block")。这会帮助我们识别一些东西吗？因为这种内联样式似乎从未改变过。

【解决方案2】：

为图像设置一个变量，然后对它做任何你想做的事情。

function createIMG(alt){
const flowerIMG = document.createElement("img")
flowerIMG.src = "https://i.pinimg.com/originals/12/e2/6d/12e26d72c68442640b27583cff8d50e7.png"
flowerIMG.width="100"
flowerIMG.height="100"
flowerIMG.display="block"
flowerIMG.alt = alt
document.body.appendChild(flowerIMG)
}

createIMG("FLOWERS")

这样您可以在函数中创建图像并且 alt 可以更改。您还可以将其他属性设置为参数。

【讨论】：

感谢您的代码。但是这个只会呈现动态，不能在这个标签中做任何事情..
动态是什么意思。就像当你按下按钮时图片会加载一样？
动态感知标签将自动生成并加载到页面中，而不会触发任何事件（onclick 或 onchange）。我的情况是，我什至不知道代码写在哪里！！。
我编辑了它，所以你可以在函数中调用它
谢谢。此代码将支持静态代码。