javascript - var imgLoader = document.getElementById ("imgLoader");始终为空

Question

我在 ASP.net 中创建了一个包含图片的简单数据列表。 当我单击图像时，我想将其显示在一个单独的小窗口中，例如弹出窗口。 我添加了一个加载程序图像以将其显示在所选图像之前。 您可以在下面看到弹出窗口的 asp.net 代码:

<div id="divImage" >
<table style="height: 100%; width: 100%">
    <tr>
        <td valign="middle" align="center" colspan = "3" style     ="height:500px;">
            <img id="imgLoader" runat="server" alt=""
             src="~/Images/loader.gif" />
            <img id="imgFull" alt="" src="" 
             style="display: none;
            height: 500px;width: 600px" />
        </td>

在 JavaScript 代码中我得到了变量 (imgLoader = NULL)。

var imgLoader = document.getElementById("imgLoader");

您知道为什么我得到 NULL 结果吗？

LoadDiv 函数:

 function LoadDiv(url, lnk) {
            var img = new Image();
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            var imgLoader = document.getElementById("imgLoader");
            var dl = document.getElementById("<%=DataList1.ClientID%>");
            var imgs = dl.getElementsByTagName("img");

            CurrentPage = GetImageIndex(lnk.parentNode) + 1;
            imgLoader.style.display = "block";
            img.onload = function () {
                imgFull.src = img.src;
                imgFull.style.display = "block";
                imgLoader.style.display = "none";
            };
            img.src = url;
            Prepare_Pager(imgs.length);
            var width = document.body.clientWidth;
            if (document.body.clientHeight > document.body.scrollHeight) {
                bcgDiv.style.height = document.body.clientHeight + "px";
            }
            else {
                bcgDiv.style.height = document.body.scrollHeight + "px";
            }

            imgDiv.style.left = (width - 650) / 2 + "px";
            imgDiv.style.top = "20px";
            bcgDiv.style.width = "100%";

            bcgDiv.style.display = "block";
            imgDiv.style.display = "block";
            return false;
        }

Answer 1

因为 <img>标有runat="server"这意味着 id将在 Asp.net 内部使用来引用此组件，而实际的元素 id(在客户端)将有所不同。

试试这个:

var imgLoader = document.getElementById("<%=imgLoader.ClientID%>");

或者，如果您在服务器端使用此组件执行任何操作，则可以简单地省略 runat="server" 。