无法在 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：无法获取属性“样式”的值：对象为空或未定义

<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";
}

Answer 2

在您的代码中未找到任何 ID 为 divExternUser 或 divInternUser 的元素。所以我创建了两个 div 给他们那些 id。

这样调用下拉列表的displayHideShowDivExtern()函数onchange，

onchange="displayHideShowDivExtern(this)" 

HTML：

<asp:DropDownList ID="ddlOExterna" runat="server"  CssClass="txtBoxLarge" Height="20px" onchange="displayHideShowDivExtern(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> 

<div id="divExternUser">This is divExternUser</div>
<div id="divInternUser">This is divInternUser</div>

javaScript：

<script type="text/javascript">
    function displayHideShowDivExtern(element) {
        alert();
        switch (element.value) {
            case "S":
                document.getElementById("divExternUser").style.display = "block";
                document.getElementById("divInternUser").style.display = "none";
                break;
            default:
                document.getElementById("divExternUser").style.display = "none";
                document.getElementById("divInternUser").style.display = "block";
         }
     }
</script>

因此，归根结底，无论您是否使用 runat="server"，您都可以使用该元素的 id 从客户端访问该元素.

因为，虽然它是一个服务器端控件，但它最终会被渲染成纯 HTML 元素，然后转换为 DOM 元素，以便在客户端进行操作。所以你将使用它的 id 来获得它。

注意：如果您的 js 代码在外部文件中，您必须将该脚本的引用添加到您的页面中，以便您可以使用它。

<script src="pathToYourJSFile/yourjsFile.js"></script>

就是这样。它会起作用的。

Answer 3

尝试在 div 标签中添加属性 ClientIdMode = 'static'。