在cs檔案中控制控制項的 css樣式。

來源:互聯網
上載者:User
首先在 aspx 的前台檔案中:

<script  type="text/javascript">
        function change(s)
        {
           
            switch(s)
            {
             case "固定期限":
            document.getElementById("Panel1").style.display ="block";
            document.getElementById("Panel2").style.display ="none";
            document.getElementById("Panel3").style.display ="none";
            document.getElementById("Panel4").style.display ="none";
            document.getElementById("Panel5").style.display ="none";
            break;
             case "完成一定任務":
            document.getElementById("Panel1").style.display ="none";
            document.getElementById("Panel2").style.display ="block";
            document.getElementById("Panel3").style.display ="none";
            document.getElementById("Panel4").style.display ="none";
            document.getElementById("Panel5").style.display ="none";
            break;
             case "非全日制":
            document.getElementById("Panel1").style.display ="none";
            document.getElementById("Panel2").style.display ="none";
            document.getElementById("Panel3").style.display ="block";
            document.getElementById("Panel4").style.display ="none";
            document.getElementById("Panel5").style.display ="none";
            break;
             case "用工協議":
            document.getElementById("Panel1").style.display ="none";
            document.getElementById("Panel2").style.display ="none";
            document.getElementById("Panel3").style.display ="none";
            document.getElementById("Panel4").style.display ="block";
            document.getElementById("Panel5").style.display ="none";
            break;
            case "勞務派遣":
            document.getElementById("Panel1").style.display ="none";
            document.getElementById("Panel2").style.display ="none";
            document.getElementById("Panel3").style.display ="none";
            document.getElementById("Panel4").style.display ="none";
            document.getElementById("Panel5").style.display ="block";
            break;
                    default:
                    break;
            }
        }
    </script>

<table>
<tr>
    <td height="30" style="width: 214px">合約類型</td>
    <td>&nbsp;<asp:DropDownList ID="ddlcontract" runat="server" Width="131px"  onchange="change(this.value)">
        <asp:ListItem Value="固定期限">固定期限</asp:ListItem>
        <asp:ListItem Value="完成一定任務">完成一定任務</asp:ListItem>
        <asp:ListItem Value="非全日制">非全日制</asp:ListItem>
        <asp:ListItem Value="用工協議">用工協議</asp:ListItem>
        <asp:ListItem Value="勞務派遣">勞務派遣</asp:ListItem>
        </asp:DropDownList>                     
    </td>
    <td>&nbsp;</td>
  </tr>
</table>

<asp:Panel ID="Panel1" runat="server" style="display:none" Height="30px" Width="125px">
<asp:Panel ID="Panel2" runat="server" style="display:none" Height="30px" Width="125px">
<asp:Panel ID="Panel3" runat="server" style="display:none" Height="30px" Width="125px">
<asp:Panel ID="Panel4" runat="server" style="display:none" Height="30px" Width="125px">
<asp:Panel ID="Panel5" runat="server" style="display:none" Height="30px" Width="125px">

--------------------------------------------
如果想要在 .CS 檔案中寫 panel 的 css 樣式則需要這樣寫
.aspx.CS

this.Panel3.Style.Add("display", "block");  

--------------------------------------------

如果寫成  this.Panel3.Visible = true; 則對前台 style="display:none" 的控制項不起作用。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.