在不刷新页面的情况下使用 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", "http://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", "http://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="http://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!" onclick="showRabbit();" id="hocusPocus" />
   </p>
  </form>                                                                    
 </body>
</html>

阅读更多

没有更多推荐了,返回首页