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：无法获取属性'style'的值：object为null或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";
}

Answer 2

尝试添加属性ClientIdMode =＆＃39; static＆＃39;在div标签。

Answer 3

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

以这种方式更改下拉列表中的 displayHideShowDivExtern（） 功能，

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 =＆＃34;服务器＆＃34; ，您都可以使用来访问客户端的元素该元素的id。

因为尽管它是服务器端控件，但它最终将被渲染为纯HTML元素，然后转换为DOM元素以便在客户端进行操作。因此，您将使用它的ID来获得它。

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

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

那就是它。它会工作。

无法使用div元素上的runat访问JS函数

3 个答案: