Question

如何在点击时更改背景图片我有这个代码

html { 
  background: url(img01.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我有5个div。其中4个是隐藏的。当我点击按钮时，它显示我的下一个div并隐藏上一个。当它向我展示下一个div我还想在div下显示新的背景图像。怎么做:(

<div id='2' style="display: none;">
    <input type='button' div_funkcija(2);" value="Sehr-Gut">
    <input type='button' div_funkcija(2);" value="Gut">     
    <input type='button' div_funkcija(2);" value="Befriedigend">
    <input type='button' div_funkcija(2);" value="Ausreichend">
    <input type='button' div_funkcija(2);" value="Mangelhaft">
</div>

脚本是

function div_funkcija($div) {
    document.getElementById($div).style.display='none';
    document.getElementById($div+1).style.display='block';
}

现在当它打开新的div如何在body或html背景上显示新图像。

Answer 1

function div_funkcija($div)
        {
            document.getElementById($div).style.display='none';
            document.getElementById($div+1).style.display='block';
            document.getElementsByTagName('html')[0].style.backgroundImage='url(newImage.jpg) no-repeat center center fixed';
        }

或者您可以为html标记指定ID并使用document.getElementById。只是一个附加建议，我通常不会设置html标签的样式，通常我引用正文。

Answer 2

帮助的代码

<input type='button' Onclick="document.body.style.cssText+=';background-image: url(Cistoca.jpg);background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;'" />

单击更改HTML背景图像

2 个答案: