1

我正在尝试编写一个函数，该函数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";
  }
}
4

1 回答 1

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

于 2018-04-28T21:31:27.683 回答