Question

我有一个带3个按钮的页面。该页面的默认背景为gif。 Button 1应该使背景变黑。 Button 2应将背景更改回gif。当您将鼠标悬停在button 3上时，背景会闪烁red和green。

加载后，我可以将背景设为black，但不能返回gif。无论Button 3或gif背景如何，black都有效，但在使用后，我无法使用black将背景更改为button 1。（button 2仍然不起作用）如何让这3个按钮完成工作，并改变背景？

var myHoverInterval = null;

function switchfunction() {
  if (document.body.style.background === 'red') {
    document.body.style.background = 'green';
  } else {
    document.body.style.background = 'red';
  }
}

window.onload = function() {
  // Get references to the DOM elements you'll work with
  var bdy = document.body;
  var btn = document.getElementById("changeBackgroundButton");
  var btn2 = document.getElementById("changeBackgroundBackButton")
  var btn3 = document.getElementById("trippyBackground")

  // Set up the button to have a click event handler:
  btn.addEventListener("click", function() {
    /* Just remove the image and the page will revert to the previously set color */
    bdy.style.backgroundImage = "url('')";
  });
  btn.style.color = "red";
  btn2.addEventListener("click", function() {
    /* Just remove the image and the page will revert to the previously set color */
    bdy.style.backgroundImage = "url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif) no-repeat center center fixed";
  });
  btn3.addEventListener("mouseover", function() {
    if (myHoverInterval != null) {
      return;
    }
    myHoverInterval = setInterval(function() {
      switchfunction();
    }, 500);
  });
  btn3.addEventListener("mouseout", function() {
    if (myHoverInterval != null) {
      clearInterval(myHoverInterval);
      myHoverInterval = null;
    }
  });

}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <style>
    body {
      background: url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif) no-repeat center center fixed;
      background-size: cover;
      background-color: black;
    }
  </style>
</head>

<body>
  <p>
    <button id="changeBackgroundButton" style="color:white; font-size: 150%;background-color :lightblue">Click this button if the page is slow, it's probably due to the background</button> <br>
    <button id="changeBackgroundBackButton" style="color:white; font-size: 150%;background-color :lightblue">Try to load the background again</button> <br>
    <button id="trippyBackground" style="color:white; font-size: 150%;background-color :lightblue">trolololol?</button>
  </p>

</body>

</html>

Answer 1

您的代码中存在一些问题。

background是所有背景属性的通用属性。在您的情况下，最好不要使用它并单独指定每个属性，例如background-image和background-color。
在mouseout事件结束时，您必须告诉该页面恢复原始背景。

以下是代码的改进版本，没有任何错误（我希望）。

＆＃13;

var myHoverInterval = null;

function switchfunction() {
  //You must remove the background image before changing bgcolor to red or green
  //Use backgroundColor instead of background
  document.body.style.backgroundImage = "url('')";
  if (document.body.style.backgroundColor === 'red') {
    document.body.style.backgroundColor = 'green';
  } else {
    document.body.style.backgroundColor = 'red';
  }
}
window.onload = function() {
    // Get references to the DOM elements you'll work with
    var bdy = document.body;
    var btn = document.getElementById("changeBackgroundButton");
    var btn2 = document.getElementById("changeBackgroundBackButton");
    var btn3 = document.getElementById("trippyBackground");
    var img; // This variable will be used to remember the background before the hover events

    // Set up the button to have a click event handler:
    btn.addEventListener("click", function() {
      /* Just remove the image and the page will revert to the previously set color */
      bdy.style.backgroundImage = "url('')";
    });
    btn.style.color = "red";
    btn2.addEventListener("click", function() {
      /* Just remove the image and the page will revert to the previously set color */
      // Use backgroundImage for the GIF
      bdy.style.backgroundImage = "url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif)";
    });
    btn3.addEventListener("mouseover", function() {
      if (myHoverInterval != null) {
        return;
      }
      // Store current bgImage in variable
      img = bdy.style.backgroundImage;
      // Call func straight away once before the interval so it takes effect straight away
      switchfunction();
      myHoverInterval = setInterval(function() {
        switchfunction();
      }, 500);
    });
    btn3.addEventListener("mouseout", function() {
      if (myHoverInterval != null) {
        clearInterval(myHoverInterval);
        myHoverInterval = null;
        // Set the background image and color back to what they were
        bdy.style.backgroundColor = 'black';
        bdy.style.backgroundImage = img;
      }
    });
}

＆＃13;

body {
  background-image: url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-opacity: 0.6;
  background-color: black;
}

＆＃13;

<body>
  <p>
    <button id="changeBackgroundButton" style="color:white; font-size: 150%;background-color :lightblue">Click this button if the page is slow, it's probably due to the background</button>
    <br>
    <button id="changeBackgroundBackButton" style="color:white; font-size: 150%;background-color :lightblue">Try to load the background again</button>
    <br>
    <button id="trippyBackground" style="color:white; font-size: 150%;background-color :lightblue">trolololol?</button>
  </p>
</body>

＆＃13;

Answer 2

您正在混合多个样式属性而不清除前一个样式属性。我建议只使用style.background，这样可以确保始终清除以前的值。

...
  btn2.addEventListener("click", function() {
    bdy.style.background = "url('https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif') no-repeat center center fixed";
    bdy.style.backgroundSize = "cover";
    bdy.style.backgroundColor = "black";
  });
...

另见我的笔：https://codepen.io/anon/pen/NjvmYv

覆盖/更改背景的问题

2 个答案: