在不刷新页面的情况下使用 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>

posted on 2007-12-30 16:53 破曉之陽阅读(643) 评论(3) 收藏举报

刷新页面返回顶部

转行了，但是每次上网都会过来看看。或许几年以后我又会从事这个行业。

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

导航

公告