我有一个包含 3 个按钮的页面。该页面有一个 gif 作为默认背景。
Button 1 应该使背景变黑。
Button 2 应将背景更改回 gif。
当您将鼠标悬停在 按钮 3 上时，背景会闪烁 红色 和 绿色。
加载后我可以将背景更改为黑色，但不能变回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>最佳答案
您的代码中存在一些问题。
-
CSS 中的
background是所有背景属性的通用属性。在您的情况下，最好不要使用它并单独指定每个属性，例如background-image和background-color。- 在
mouseout事件结束时，您必须告诉页面恢复到原始背景。
这是您的代码的改进版本，没有任何错误(我希望如此)。
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>关于javascript - 覆盖/更改背景的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43782280/