以编程方式更改 img 标签的 src

IT技术 javascript html image src
2021-01-21 18:53:38

如何使用 javascript更改标签的src属性img？

<img src="../template/edit.png" name=edit-save/>

起初我有一个默认的 src，它是“../template/edit.png”，我想用“../template/save.png” onclick 来改变它。

更新：这是我的 html onclick：

<a href='#' onclick='edit()'><img src="../template/edit.png" id="edit-save"/></a>

和我的 JS

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }
}

我试过将它插入到编辑（）中，它可以工作，但需要单击图像两次

var edit_save = document.getElementById("edit-save");
    edit_save.onclick = function(){
       this.src = "../template/save.png";
    }
6个回答

给你的img标签一个id，然后你就可以

document.getElementById("imageid").src="../template/save.png";
@william44isme，我们的页面加载速度会比以前慢。我认为 jQuery 仅适用于使用相同代码的网站，甚至更多。例如，如果我们使用上述代码超过 30 或 50 次。所以有必要使用jQuery
2021-04-03 18:53:38
对于简单的事情，比如设置输入的值或更改图像 src（特别是当你使用具有 ID 的元素时），你真的应该尽量避免使用 jQuery，因为调用比纯 JS 调用慢得多
2021-04-06 18:53:38

您可以同时使用 jquery 和 javascript 方法：例如，如果您有两个图像：

<img class="image1" src="image1.jpg" alt="image">
<img class="image2" src="image2.jpg" alt="image">

1)Jquery方法->

$(".image2").attr("src","image1.jpg");

2)Javascript方法->

var image = document.getElementsByClassName("image2");
image.src = "image1.jpg"

对于这种类型的问题，jquery 使用起来很简单。

海报从未表示对 jQuery 解决方案有任何兴趣。jQuery 方法也不简单。不要用 jQuery 解决方案回答 JS 问题（除非帖子表明他们想要）。它只会让试图学习 JS 的人感到困惑。
2021-03-10 18:53:38
getElementByClassName 返回所有元素的集合。我们还需要提及元素的索引。var image = document.getElementsByClassName("image2")[0]; image.src = "image1.jpg"
2021-03-29 18:53:38

如果您使用 JQuery 库，请使用以下说明：

$("#imageID").attr('src', 'srcImage.jpg');
该问题不要求 jQuery 答案、包含 jQuery 标记或建议可以使用 jQuery。
2021-03-12 18:53:38
在 Javascript 中内置等效函数时告诉人们使用 jQuery 是没有意义的。每个 JS 问题都不需要 jQuery 答案。这个解决方案是一个混杂的东西，它阻止人们了解 vanilla JS 已经可以做什么。
2021-03-17 18:53:38

现在好了

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }

    var edit_save = document.getElementById("edit-save");

       edit_save.src = "../template/save.png";                              
}

给你的图片一个id。然后你可以在你的javascript中做到这一点。

document.getElementById("blaah").src="blaah";

您可以使用此语法来更改任何元素的任何属性的值。

其它你可能感兴趣的问题
上一篇获取对象的键数组 下一篇在 setInterval 中使用 React 状态挂钩时状态不更新