通过window.getComputedStyle

Question

我尝试编写一个函数，通过按钮单击从3个不同的选项中循环background-image，但代码无效。也许有人可以说出原因......

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）也不会遇到同样的问题。