在不刷新页面的情况下使用 DOM 改变网页界面

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript" type="text/javascript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "https://p-blog.csdn.net/images/p_blog_csdn_net/zhaoxiaoyang5156/319232/o_rabbit-hat.gif");
//      var newImage = document.createElement("img");
//      newImage.setAttribute("src", "rabbit-hat.gif");
//      newImage.setAttribute("id","topHat");
//      var imgParent = hatImage.parentNode;
//      imgParent.insertBefore(newImage, hatImage);
//      imgParent.removeChild(hatImage);
//      imgParent.replaceChild(newImage, hatImage);
      var button = document.getElementById("hocusPocus");
      button.setAttribute("value", "Get back in that hat!");
      button.onclick = hideRabbit;
    }
    function hideRabbit() {
  var hatImage = document.getElementById("topHat");
  hatImage.setAttribute("src", "https://p-blog.csdn.net/images/p_blog_csdn_net/zhaoxiaoyang5156/319232/o_topHat.gif");
  var button = document.getElementById("hocusPocus");
  button.setAttribute("value", "Hocus Pocus!");
  button.onclick = showRabbit; 
}
  </script>
  <style type="text/css">
  .center{
  text-align: center;
  }
  </style>
 </head>

 <body>
  <h1 class="center">Welcome to the DOM Magic Shop!</h1>
  <form id="magic-hat" action="">
   <p class="center">
    <img src="https://p-blog.csdn.net/images/p_blog_csdn_net/zhaoxiaoyang5156/319232/o_topHat.gif" id="topHat" alt="帽子" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" οnclick="showRabbit();" id="hocusPocus" />
   </p>
  </form>                                                                    
 </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值