javascript - 无法在 div 元素上使用 runat 访问 JS 函数

Question

当我使用 runat="server"时，我在使用 document.getElementById("#divExternUser").style.display = "block"; 时遇到 Javascript 问题

我有这个功能:

function displayHideShowDivExtern(element) {
switch(element.value) {
    case "S":
        document.getElementById("divOExternS").style.display = "block";
        document.getElementById("divOExternM").style.display = "none";
        break;
    default:
        document.getElementById("divOExternS").style.display = "none";
        document.getElementById("divOExternM").style.display = "block";
}

}

在我的 aspx 上，当我将 runat="server" 放在 div 元素上时，我无法访问我的 DropDownList 元素(在 javascript 函数中)。

SCRIPT5007: Unable to get value of the property 'style': object is null or undefined

<div id="divOExtern" style="display:block" >
     Extern
       <asp:DropDownList ID="ddlOExterna" runat="server"  CssClass="txtBoxLarge" Height="20px"   onchange="javascript:displayHideShowDivOExtern(this)">
            <asp:ListItem Text="S -" Value="S" />
            <asp:ListItem Text="T -" Value="T" />
            <asp:ListItem Text="M -" Value="M" />
            <asp:ListItem Text="O -" Value="O" />
       </asp:DropDownList> 
        <p>
           <div id="divOExternS" style="display:none"  runat="server"  >
                 S
                    <asp:DropDownList ID="ddlS" runat="server"  CssClass="txtBoxLarge" Height="20px"   />
           </div>              
           <div id="divOExternT" style="display:none" runat="server"  >
                 T
                    <asp:DropDownList ID="ddlT" runat="server"  CssClass="txtBoxLarge" Height="20px"   />
           </div>
            <div id="divOExternM" style="display:none" runat="server"  >
                 M
                    <asp:DropDownList ID="ddlM" runat="server"  CssClass="txtBoxLarge" Height="20px"   />
           </div>
           <div id="divOExternO" style="display:none" runat="server"  >
                 O
                     <asp:TextBox ID="txtEntities" runat="server"  CssClass="txtBoxLarge" />                                     
           </div>
       </p>
   </div>

在div上使用runat之前，我可以毫无问题地访问。我不明白为什么!？

Answer 1

因为runat=server您可以使用以下方式访问 div 属性: "<%=divid.ClientID%>"尝试更改您的代码如下:

function displayHideShowDivExtern(element) {
switch(element.value) {
    case "S":
        document.getElementById("<%=divExternUser.ClientID%>").style.display = "block";
        document.getElementById("<%=divInternUser.ClientID%>").style.display = "none";
        break;
    default:
        document.getElementById("<%=divExternUser.ClientID%>").style.display = "none";
        document.getElementById("<%=divInternUser.ClientID%>").style.display = "block";
}