JavaScript change img src attribute without jQuery

Question

How to change the src attribute of a HTMLImageElement in JavaScript?

I need help to convert logo.attr('src','img/rm2.png') to vanilla JavaScript.

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

score 33 · Accepted Answer · edited May 23 '17 at 12:00

33

You mean you want to use pure javascript?

This should do it:

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

So your function should look like :

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

Note: You could also use element.setAttribute. BUT, see this post for more:
When to use setAttribute vs .attribute= in JavaScript?

edited May 23 '17 at 12:00

Community

1
1

answered Mar 16 '12 at 04:08

gideon

19,329
11
72
113

5

dang it, beat me by 8 seconds :) – dbrin Mar 16 '12 at 04:08
:) Yea the JS/JQuery questions really have too many people fighting to [shoot an answer.](http://meta.stackexchange.com/questions/9731/fastest-gun-in-the-west-problem) – gideon Mar 16 '12 at 04:12

score 1 · Answer 2 · answered Mar 16 '12 at 04:09

1

try this...hope it works

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

answered Mar 16 '12 at 04:09

Tejasva Dhyani

1,342
1
10
19

score 0 · Answer 3 · answered Dec 22 '15 at 10:10

So if you want to check if the size has changes and then changes back check code bellow.

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";

    }
};

Adjust window.innerWidth to decide on your break points. Hope that helps.

score 0 · Answer 4 · edited May 18 '16 at 22:58

0

I think it's just logo.src = "img/rm2.png".

edited May 18 '16 at 22:58

Francisco Romero

12,787
22
92
167

answered Mar 16 '12 at 04:08

dbrin

15,525
4
56
83

score 0 · Answer 5 · answered Mar 16 '12 at 04:09

0

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

answered Mar 16 '12 at 04:09

Aaron

5,137
1
18
20

score 0 · Answer 6 · answered Mar 16 '12 at 04:10

0

Since you say you want to do this in different places of the program, I would create a function like this:

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

answered Mar 16 '12 at 04:10

Nobita

23,519
11
58
87

JavaScript change img src attribute without jQuery

6 Answers6

Linked

Related