如何解决使用 // Reset 'button3' 重置 style.transition、style.opacity 和 innerHTML
我正在尝试执行以下操作:我有一个带有按钮的盒子,可以让它变长、变色、褪色,然后我需要重置它。如何重置淡入淡出?
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<script type="text/javascript">
document.getElementById("button1").addEventListener("click",function(){
document.getElementById("box").style.height = "250px";
document.getElementById("box").style.width = "250px";
});
document.getElementById("button2").addEventListener("click",function(){
document.getElementById("box").style.backgroundColor = "blue";
});
document.getElementById("button3").addEventListener("click",function(){
document.getElementById("box").style.transition = "opacity 0.5s linear 0s";
document.getElementById("box").style.opacity = 0;
document.getElementById("box").innerHTML = "Fade In";
});
document.getElementById("button4").addEventListener("click",function(){
// Reset 'button1'
box.style.height = '150px';
box.style.width = '150px';
// Reset 'button2'
box.style.backgroundColor = 'orange';
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。