当display:none时，getElementById(）无法获取元素

getElementById() fails to get element when display:none

本文关键字：获取 元素 getElementById display none      更新时间：2023-09-26

当要查找的元素具有style="display:none;"时，我们有几种$get('foo')或document.getElementById('foo')失败的情况。这似乎在某些浏览器中有效，但在其他浏览器中无效；具体来说，下面显示的情况在IE9兼容模式下运行良好，但在兼容模式关闭时失败

有人能解释为什么会发生这种情况，以及我们如何解决它吗？下面是一个例子。

我们的ASPX页面包含

<span id="JobAddressCheckBoxWrapper" style="display: none;">
  <asp:CheckBox ID="JobAddressCheckBox" CssClass="DefaultTextCell" runat="server" Text="__Job address"
    Style="margin-right: 2em;" onclick="ShowJobAddress();" />
</span>
<span id="PredefinedReplyCheckBoxWrapper">
  <asp:CheckBox ID="PredefinedReplyCheckBox" CssClass="DefaultTextCell" runat="server"
    Text="__Pre-defined reply" onclick="ShowReplies()" AutoPostBack="false" Style="margin-right: 2em;" />
</span>

导致生成此HTML

<span style="display: none;" id="JobAddressCheckBoxWrapper">
  <span style="margin-right: 2em;" class="DefaultTextCell">
    <input id="JobAddressCheckBox" onclick="ShowJobAddress();" name="JobAddressCheckBox" type="checkbox">
    <label for="JobAddressCheckBox">Job address</label>
  </span>
</span>
<span id="PredefinedReplyCheckBoxWrapper">
  <span style="margin-right: 2em;" class="DefaultTextCell">
    <input id="PredefinedReplyCheckBox" onclick="ShowReplies();" name="PredefinedReplyCheckBox" type="checkbox">
    <label for="PredefinedReplyCheckBox">Predefined reply</label>
  </span>
</span>

以下Javascript语句应该导致包装器变量包含对象，但在某些浏览器或IE9中的兼容模式中，jobAddressWrapper的值为null。预定义的ReplyWrapper的值从不为null。它们之间唯一的区别是JobAddressCheckboxWrapper具有style="display:none;"。

var jobAddressWrapper = $get('JobAddressCheckboxWrapper');
var predefinedReplyWrapper = $get('PredefinedReplyCheckBoxWrapper');

或

var jobAddressWrapper = document.getElementById('JobAddressCheckboxWrapper');
var jobAddressWrapper = document.getElementById('PredefinedReplyCheckBoxWrapper');

元素被跨度包裹的HTML模式是不相关的；存在元素不被跨度包裹但如果它们具有CCD_ 5则仍然不能被引用的其他情况。

更新（针对评论等）：

  1. $get提供了一个指向的getElementById方法的快捷方式Sys.UI.DomElement类。更多信息请点击此处
  2. 这些调用是在从onload和以响应用户交互。无论哪种情况都会出现问题

这确实是一个奇怪的问题，所以在做任何其他事情之前，请检查代码是否有拼写错误和范围混淆！此外，这真的是，真的旧了-所以希望你不会再遇到这个问题。=）

然而，当你试图克服这些问题，甚至更好地找到它们的原因时，你可能会找到一个解决方案，这通常会有所帮助。使用jQuery选择$('#AnyID')，如果您不熟悉，请注意css#语法。

浏览器在尝试更兼容方面已经取得了长足的进步，还有很长的路要走。早些时候，我经常使用jQuery来推断为什么一个普通的JS指令在一个浏览器中没有按我预期的方式工作，而在另一个浏览器中将工作。通常我会发现我对JS理解不够好，jQuery已经知道我需要学习什么了=）

这个答案可能与问题的每个实例都不相关，但我在使用ASP.NET母版页时遇到了它；

对于ContentPlaceHolderID="MainContent"，我的div id="IdValidationErrorDiv"实际上具有"MainContent_IdValidationErrorDiv"的呈现id。

使用此id调用getElementById成功。

相关文章：