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

Question

如何在JavaScript中更改src的{​​{1}}属性？

我需要帮助才能将HTMLImageElement转换为vanilla JavaScript。

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。但是，请看这篇文章了解更多：
When to use setAttribute vs .attribute= in JavaScript?

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

因此，如果您想检查尺寸是否有变化，然后更改后面的检查代码。

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