Question

我正在尝试通过用户点击div更改我的网站的CSS，当他们这样做时，网站的背景将变成gif，但我不知道如何在JavaScript上做到这一点！

这是我的代码

 function easterFun(){
     var changeBG = document.getElementById("body");
     changeEaster.setAttribute("style","background-image:url(eatser.gif)")

单击时我的div也不会做任何事情。它不会执行此代码可以有人告诉我问题吗？欢迎来到Holiday Spirit网站!!!

<div  id="easter"onclick="easterFun" style = "cursor: pointer"()>Easter!</div>
<div id = "xmas" onclick ="xmasFun()">Christmas</div>



</body>
</html>

Answer 1

使用style.cssText或style.backgroundImage

示例：

function easterFun(){
     var changeBG = document.getElementById("body");
     changeBG.style.cssText = "background-image: url(eatser.gif)";
}

或者：

function easterFun(){
     var changeBG = document.getElementById("body");
     changeBG.style.backgroundImage = "url(eatser.gif)";
}

注意：

document.getElementById仅捕获带ID的元素（例如<div id="body">）

获取＆＃34;身体元素＆＃34;使用：document.body（或document.getElementsTagName("body")[0]），例如：

function easterFun(){
     var changeBG = document.body;
     changeBG.style.backgroundImage = "url(eatser.gif)";
}

Answer 2

请试试这个

changeEaster.style.backgroundImage = "url(eatser.gif)";

Answer 3

你非常接近。您需要将getElementById更改为getElementsByTagName并匹配您的变量：

function easterFun(){
     document.getElementsByTagName("body")[0].setAttribute("style","background-image:url(eatser.gif)");
}

getElementsByTagName返回一个对象数组，这就是为什么在函数调用之后，我们访问[0]。

在上文中，为了简洁，我还删除了变量声明。

javascript上的背景gif改变css

3 个答案: