JavaScript如何在不使用jQuery的情况下更改img标签的src属性

Question

如何在JavaScript中更改HTMLImageElement的src属性？

我需要将logo.attr('src','img/rm2.png')转换为纯JavaScript。

window.onresize = window.onload = function () {
    if (window.innerWidth > 1536) {
        var logo = document.getElementById('rm');
        logo.attr('src','img/rm2.png');
    }
};

- technopeasant

Answer 1

你的意思是希望使用纯JavaScript吗？

这应该可以解决：

var logo = document.getElementById('rm');
logo.src = "img/rm2.png";

所以你的函数应该长这样：

window.onresize = window.onload = function () {
    if (window.innerWidth > 1536) {
      var logo = document.getElementById('rm');
      logo.src = "img/rm2.png";
    }
};

注意: 您也可以使用element.setAttribute。但是，请参阅此帖子以获取更多信息：
在JavaScript中何时使用setAttribute vs .attribute=？

- gideon

---

抱歉，您比我快8秒 :) - dbrin

是的，JS / JQuery问题确实有太多人争先恐后地回答。 - gideon

Answer 2

试试这个……希望它能够工作

window.onresize = window.onload = function () {
    if (window.innerWidth > 1536) {
        var logo = document.getElementById('rm');
        logo.setAttribute('src','img/rm2.png');
    }
};

- Tejasva Dhyani

Answer 3

var logo = document.getElementById('rm');
logo.setAttribute('src', 'img/rm2.png');

- Aaron

Answer 4

既然您说您想在程序的不同位置执行此操作，我会创建一个像这样的函数：

function ChangeImage(image_id,path)
{
  document.images[image_id].src = path
}

- Nobita

Answer 5

所以，如果你想检查尺寸是否改变，然后再改回来，请查看下面的代码。

window.onresize = window.onload = function () {
    if (window.innerWidth < 768) {

      var logo = document.getElementById('changeLeft');
      logo.src = "MobileImage.png";

    }else{

 var logo = document.getElementById('changeLeft');
      logo.src = "DesktopImage.png";

    }
};

调整window.innerWidth以确定您的断点位置。希望这有所帮助。

- Sabba Keynejad

Answer 6

我认为只需要 logo.src = "img/rm2.png"。

- dbrin