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
}