我正在寻找一种让它工作的方法:
我想在网站上有一个按钮,用于控制背景动画。它应该通过单击"淡出"(直接,无延迟(整个背景动画,但再次单击,它应该"淡入"。
我试过这个:
if (document.querySelector('.Welle').style.display == 'none'){
document.querySelector('.Welle').style.display = 'block';
}
else {
document.querySelector('.Welle').style.display = 'none';
}
<a type="button" value="Klicken um Hintergrundanimation zu beenden" onclick="backgroundbutton()" style="text-decoration: none;">
<button>
Hintergrund
</button>
</a>
但是没有用,我做错了什么?有人可以纠正我吗?
多谢
试试这个:
function backgroundbutton() {
if (document.querySelector('.Welle').style.display == 'none'){
document.querySelector('.Welle').style.display = 'block';
}
else {
document.querySelector('.Welle').style.display = 'none';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Hintergrund" onclick="backgroundbutton();" />
<div class="Welle">test</div>
var Welle = document.querySelector('.Welle');
function backgroundbutton() {
// if the display is "none", we return "block", else we return "none"
var dp = (Welle.style.display == 'none') ? 'block' : 'none';
Welle.style.display = dp;
}
body { margin: 0; padding: 0 }
.Welle {
width: 100%;
height: 100vh;
background: yellow url('http://wallpapercave.com/wp/pwQMS6f.jpg') no-repeat;
background-size: cover;
z-index: -1;
display: block;
position: fixed;
top: 0;
left: 0;
}
<div class="Welle"></div>
<button onclick="backgroundbutton()">Hintergrund</button>