Изменить изображение Javascript

Question

Это часть я хочу изменить

img alt="image" class="background-image" src="X.jpg"> 

X следует заменить

normal.jpg или mobile.jpg на основе

if(navigator.userAgent.match(/Android/i) 
      || navigator.userAgent.match(/webOS/i) 
      || navigator.userAgent.match(/iPhone/i) 
      || navigator.userAgent.match(/iPad/i) 
      || navigator.userAgent.match(/iPod/i) 
      || navigator.userAgent.match(/BlackBerry/i) 
      || navigator.userAgent.match(/Windows Phone/i) 
     ) 

так, если это true Я хочу иметь там мобильный jpg еще обычный, я попробовал

var image = document.getElementByClass('background-image'); 
      image.style.backgroundImage = 'url(mobile.jpg)'; 

без успеха

Answer 1

Использования getElementsByClassName(), которые возвращают массив объектов и выберите первый, используя [0]:

if(condition) 
    document.getElementsByClassName('background-image')[0].src = 'mobile.jpg'; 
else 
    document.getElementsByClassName('background-image')[0].src = 'normal.jpg'; 

Надеется, что это помогает.

Answer 2

Я хотел бы сделать что-то вроде этого:

if (window.innerWidth <= 524) { 
    getElementById('background-image').style.backgroundImage = "url('mobile.jpg')"; 
} 

getElementByClass возвращает массив так что вам нужно, чтобы получить первый элемент, если вы хотите использовать его var image = document.getElementsByClassName('background-image')[0]