JavaScript更改img src属性而不使用jQuery

Question

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

我需要帮助将logo.attr('src','img/rm2.png')为vanilla JavaScript。

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

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 =？

Answer 2

试试这个...希望它有效

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

Answer 3

因此，如果您想检查大小是否有变化，然后更改回检查代码。

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来决定你的断点。 希望有所帮助。

Answer 4

我认为这只是logo.src = "img/rm2.png" 。

Answer 5

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

Answer 6

既然你说你想在程序的不同位置做这个，我会创建一个这样的函数：

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