Изменение фонового изображения через window.getComputedStyle

Question

Я пытаюсь написать функцию, которая циклически повторяет background-image из 3-х различных опций нажатием кнопки, и код не работает. Может быть, кто-то может сказать почему ...

function changeBackground (){
  console.log('change background');
  var b = document.getElementById('mainbody');
  var bstyle = window.getComputedStyle(b, null).getPropertyValue('background-image');
  if (bstyle == "url('strawberry.png')") {
    b.style.backgroundImage = "url('raspberry.png')";
  } else if (bstyle == "url('raspberry.png')"){
    b.style.backgroundImage = "url('blueberry.png')";
  } else {
    b.style.backgroundImage = "url('strawberry.png')";
  }
}

Например, этот код для изменения font-size отлично работает.

function changeSize (){ 
  console.log('changing font size');
  var s = document.getElementById('clock');
  var sstyle = window.getComputedStyle(s, null).getPropertyValue('font-size');
  if (sstyle == "25px") {
    s.style.fontSize = "50px";
  } else{
    s.style.fontSize = "25px";
  }
}

Answer 1

var x = 0;
var pics = ['strawberry.png', 'raspberry.png', 'blueberry.png'];
function changeBackground (){
  console.log('change background');
  var b = document.getElementById('mainbody');
  b.style.backgroundImage = 'url('+pics[(x++) % pics.length]+')';
}

Я бы предложил использовать переменную-счетчик, как показано выше, чтобы отслеживать количество вызовов функции и соответственно обновлять фон.

Проблема, с которой сталкиваются, заключается в том, что когда JavaScript изменяет URL-адрес фонового изображения, полный абсолютный путь сохраняется как вычисленное значение в CSS. Однако при сравнении с ним позже этот абсолютный путь не совпадает с тем, который был первоначально использован. Очевидно, что другие атрибуты, такие как font-size, не будут сталкиваться с такой же проблемой.