5

当要查找的元素 has 时，我们有几种情况$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。预定义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;".

更新（回应评论等）：

  1. $get 提供了 Sys.UI.DomElement 类的 getElementById 方法的快捷方式。更多信息在这里
  2. 这些调用是在从 onload 调用和响应用户交互的函数中进行的。在任何一种情况下都会出现问题。
4

2 回答 2

1

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

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

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

于 2013-09-24T06:17:09.817 回答
1

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

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

使用此 ID 调用 getElementById 成功。

于 2015-10-08T15:29:52.110 回答