关于JavaScript的问题

<head runat="server">
    <title>动态样式的字型与色彩</title>
    <style type="text/css">
    #bodycolor
    {
     font-size:12px;
     color:Red;
    }
    .littlered
    {
     color:Red;
     font-size:9px;
    }
    .bigred
    {
     color:Red;
     font-size:14px;
    }
    h2
    {
     font-size:16px;
     color:Yellow;
     background-color:Blue;
    }
    </style>
    <script type="text/javascript">
        function setWhite() {
            document.getElementById("myH2").style.color = "white";
        }
        function setGreen() {
            bodycolor.style.color = "green";
        }
        function setLarge() {
            document.getElementById("myH2").style.fontsize = "18px";
        }
        function setSmall(){
            document.getElementById("myH2").style.fontsize = "10px";
        }
        function hideElement() {
            if (myH2.style.display == "none") {
                myH2.style.display = "";
            }
            else {
                myH2.style.display = "none";
            }
        }
    </script>
</head>
<body>
<h2 id="myH2">动态样式的字型与色彩</h2>
<hr />
<div id="bodycolor">动态样式的字型与色彩</div>
<p class="littlered" onmouseover="this.style.color='blue';" onmouseout="this.style.color='black';" onclick="this.className='bigred';">动态样式的字型与色彩</p>
    <form id="form1" runat="server">
<asp:Button ID="button1" runat="server" Text="白色" OnClientClick="setWhite()" />
<asp:Button ID="button2" runat="server" Text="绿色" OnClientClick="setGreen()" />
<asp:Button ID="button3" runat="server" Text="放大" OnClientClick="setLarge()" />
<asp:Button ID="button4" runat="server" Text="缩小" OnClientClick="setSmall()" />
<asp:Button ID="button5" runat="server" Text="隐藏" OnClientClick="hideElement()" />
    </form>
</body>为什么当点击按钮时时一闪而过比如说上面的按钮“白色”，本应该是“动态样式的字型与色彩”变成白色，但是却只是一闪而过，马上变成了原来的颜色，其余的也是一样的情况

解决方案 »

  1.   


    <asp:Button ID="button1" runat="server" Text="白色" OnClientClick="setWhite();return false;" />
    <asp:Button ID="button2" runat="server" Text="绿色" OnClientClick="setGreen();return false;" />
    <asp:Button ID="button3" runat="server" Text="放大" OnClientClick="setLarge();return false;" />
    <asp:Button ID="button4" runat="server" Text="缩小" OnClientClick="setSmall();return false;" />
    <asp:Button ID="button5" runat="server" Text="隐藏" OnClientClick="hideElement();return false;" />加上return false 
      

  2.   


    <head runat="server">
      <title>动态样式的字型与色彩</title>
      <style type="text/css">
      #bodycolor
      {
      font-size:12px;
      color:Red;
      }
      .littlered
      {
      color:Red;
      font-size:9px;
      }
      .bigred
      {
      color:Red;
      font-size:14px;
      }
      h2
      {
      font-size:16px;
      color:Yellow;
      background-color:Blue;
      }
      </style>
      <script type="text/javascript">
      function setWhite() {
      document.getElementById("myH2").style.color = "white";
      }
      function setGreen() {
      bodycolor.style.color = "green";
      }
      function setLarge() {
      document.getElementById("myH2").style.fontsize = "18px";
      }
      function setSmall(){
      document.getElementById("myH2").style.fontsize = "10px";
      }
      function hideElement() {
      if (myH2.style.display == "none") {
      myH2.style.display = "";
      }
      else {
      myH2.style.display = "none";
      }
      }
      </script>
    </head>
    <body>
    <h2 id="myH2">动态样式的字型与色彩</h2>
    <hr />
    <div id="bodycolor">动态样式的字型与色彩</div>
    <p class="littlered" onMouseOver="this.style.color='blue';" onMouseOut="this.style.color='black';" onClick="this.className='bigred';">动态样式的字型与色彩</p>
      <form id="form1" runat="server">
      <input id=btn1 value="白色" type="button" runat="server" onclick="setWhite()" >
      </form>
    </body>
    我换成了Input控件没问题啊 是不是因为asp:button控件 runat=server  导致页面postback了 另外用你的代码下面那四个按钮都显示不出来
      

  3.   

    方法执行完了加个return false
    或者把按钮换成  input 
      

  4.   

    如果是服务器控件的话  你最好把那个BORDER改成none
      

  5.   

     谢谢各位的答案   在代码里加return false 能够解决问题