Question

当查找的元素具有$get('foo')时，我们有几个document.getElementById('foo')或style="display:none;"失败的情况。这似乎适用于某些浏览器但不适用于其他浏览器;具体来说，下面显示的情况在兼容模式的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。 predefinedReplyWrapper的值永远不为null。它们之间唯一的区别是JobAddressCheckboxWrapper有style="display:none;"。

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

或

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

包含由span包裹的元素的HTML模式不相关;在其他情况下，元素不会被跨度包裹，但如果它们具有style="display:none;"则仍然无法引用。

更新（回应评论等）：

$ get提供了getElementById方法的快捷方式 Sys.UI.DomElement类。 More info here
这些调用是在onload和from调用的函数中进行的响应用户交互。在任何一种情况下都会出现问题。

Answer 1

这真的是一个奇怪的问题，所以在其他任何事情之前检查代码是否存在错别字和范围混乱！这也是真的，真的老 - 所以希望你还没有遇到这个问题。 =）

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

浏览器在尝试提高兼容性方面已经走了很长的路，还有很长的路要走。之前我经常使用jQuery来推断为什么一个vanilla JS指令没有按照我在一个浏览器中的预期方式工作而在另一个浏览器中工作。通常我会发现我不太了解JS并且jQuery只知道我需要学习的东西=）

Answer 2

这个答案可能与问题的每个实例无关，但我在使用ASP.NET母版页时遇到过这个问题;

使用ContentPlaceHolderID =＆＃34; MainContent＆＃34;，我的div id =＆＃34; IdValidationErrorDiv＆＃34;实际上有一个呈现的ID为＆＃34; MainContent_IdValidationErrorDiv＆＃34;。

使用此ID成功调用getElementById。

当display：none时，getElementById（）无法获取元素

2 个答案: