显示时getElementById（）无法获取元素：无

Question

当正在查找的元素具有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 的值永远不会为空。它们之间的唯一区别是 JobAddressCheckboxWrapper 有style="display:none;"。

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

或

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

元素被 span 包裹的 HTML 模式是不相关的；还有其他一些情况，元素没有被 span 包裹，但如果它们有 style="display:none;"，仍然不能被引用。

更新（响应 cmets 等）：

1. $get 提供了一个快捷方式到 getElementById 方法的 Sys.UI.DomElement 类。 More info here
2. 这些调用是在从 onload 和 响应用户交互。两种情况都会出现问题。

Answer 1

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

使用 ContentPlaceHolderID="MainContent"，我的 div id="IdValidationErrorDiv" 实际上具有“MainContent_IdValidationErrorDiv”的呈现 id。

使用此 id 调用 getElementById 成功。

Answer 2

这确实是一个奇怪的问题，所以在进行任何其他操作之前，请检查代码是否存在拼写错误和范围混淆！ 这也是真的，真的老了 - 所以希望你还没有遇到这个问题。 =)

但是，当您尝试解决此类问题，甚至更好地找到问题的原因时，您可能会找到一种解决方案通常会有所帮助。使用 jQuery 选择 $('#AnyID')，如果您不熟悉，请注意 css # 语法。

浏览器在尝试更加兼容方面已经走了很长一段路，还有很长的路要走。早些时候，我经常使用 jQuery 来推断为什么 vanilla JS 指令在一个浏览器中没有按照我想要的方式工作，而在另一个浏览器中却可以工作。通常我会发现我对 JS 的理解不够好，而 jQuery 只知道我需要学习的东西 =)