覆盖/更改背景的问题

Question

I have a page with 3 buttons. 我有一个带3个按钮的页面。 The page has a gif as default background. 该页面具有gif作为默认背景。 Button 1 should make the background black. Button 1应使背景变黑。 Button 2 should change the background back to the gif . Button 2应该将背景更改回gif 。 While you hover over button 3 , the background flashes red and green . 将鼠标悬停在button 3 ，背景会闪烁red和green 。

After loading I can cange the background to black , but not back to the gif . 加载后我可以将背景变为black ，但不能回到gif 。 Button 3 works regardless of gif or black background, but after using it I can't change the background into black using button 1 . 无论使用gif还是black背景， Button 3都能正常工作，但使用后我无法使用button 1将背景更改为black 。 (and button 2 still doesn't work) How can I get these 3 buttons to do their job, and change the background? （并且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

There are a few issues in your code. 您的代码中存在一些问题。

background in CSS is a universal property for all the backgrounds properties. CSS中的background是所有背景属性的通用属性。 In your case, it's probably best to not use it and to specify each property individually, eg background-image and background-color . 在您的情况下，最好不要使用它并单独指定每个属性，例如background-image和background-color 。
At the end of your mouseout event, you have to tell the page to revert back to the original background. 在mouseout事件结束时，您必须告诉页面恢复原始背景。

Here is an improved version of your code, without any bugs (I hope). 这是代码的改进版本，没有任何错误（我希望）。

 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; } }); }

 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; }

 <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>

Answer 2

You are mixing multiple style attributes and not clearing the previous one. 您正在混合多个样式属性而不清除前一个属性。 I would suggest to use only style.background this makes sure the previous value is always being cleared. 我建议只使用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";
  });
...

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

覆盖/更改背景的问题

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-05-04 12:51:24

解决方案2
0 2017-05-04 12:34:25

覆盖/更改背景的问题

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-05-04 12:51:24

解决方案2 0 2017-05-04 12:34:25

解决方案1
1 已采纳 2017-05-04 12:51:24

解决方案2
0 2017-05-04 12:34:25