javascript - 在javascript中的DataList中查找Div

Question

我在 asp:DataList 中有一个 div，其中包含一些其他 div。我尝试通过 document.getElementByID("") 查找 div。

它调用:无法获取未定义或空引用的属性“style”。

结果我知道 .getElementById 找不到它。那我怎样才能得到它们呢？我试图通过旧帖子找到我的数据列表，但没有一个符合我的问题。

注意:我的 div 应该被拖动，它们确实如此，但由于这个问题我无法获取它们的位置值。

代码:

function FullDragging() {
   // some code
   var dd = document.getElementById("DesigningDiv"); // frame
   var logoObject = document.getElementById("logoObject"); // draggable element
   var nameObject = document.getElementById("nameObject"); // draggable element

   function getDesigningDivSize() {
            var dd = document.getElementById("DesigningDiv");
            var aspDesigningDivHF = document.getElementById('<%=aspDesigningDivHF.ClientID %>'); // hidden-field which sends the changes in client-side to the server.
            aspDesigningDivHF.value = parseInt(dd.style.width) + "," + parseInt(dd.style.height);
        }
}
window.onload = FullDragging;

因为调用了onload函数，所以onload也会出现错误。

HTML:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID" Height="400px" Width="1400px" OnEditCommand="DataList1_EditCommand" OnItemCommand="DataList1_ItemCommand" CellPadding="40" RepeatColumns="2" RepeatDirection="Horizontal" OnCancelCommand="DataList1_CancelCommand" OnItemDataBound="DataList1_ItemDataBound" OnUpdateCommand="DataList1_UpdateCommand">
 <ItemTemplate> ... </ItemTemplate>
 <EditItemTemplate>
  <div id="DesigningDiv" style="height: 150px; width: 262.5px; border-style: groove; border-color: inherit; border-width: 1px; position: relative; height: 158px; width: 270px; background-color: #FFFFFF; visibility: hidden">
  <div id="logoObject" style="width: 51px; top: 31px; position: absolute; height: 34px; font-family: 'times New Roman', Times, serif; font-size: xx-large; font-weight: bold; color: #333333; cursor: move; left: 187px;"> logo </div>              
  <div id="nameObject" style="width: 61px; top: 31px; position: absolute; height: 22px; font-family: 'times New Roman', Times, serif; color: #666666; font-size: large; cursor: move; font-weight: bold; left: 29px; bottom: 105px;"> full name </div>
 </EditItemTemplate>
</asp:DataList>

Answer 1

有几个问题，您不应该使用静态 ID 填充项目模板，因为 ID 只能在 html 文档中出现一次。

考虑对这些 div 应用一个类并以这种方式引用它们。

渲染页面后，右键单击并检查这些元素之一。 ASP 可能会向您的 ID 添加额外的前缀，因为它是数据列表的一部分(例如，一旦页面加载，Visual Studio 中的 DivLabel1 就会变成 DataList1_DivLabel1)，javascript 不参与此转换，因此您最好按类引用这些项目