当display：none时，getElementById（）无法获取元素 [英] getElementById() fails to get element when display:none

问题描述

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

We have several cases of $get('foo') or document.getElementById('foo') failing when the element being looked for has style="display:none;". This seems to work in some browsers but not others; specifically the case shown below works fine in IE9 with compatibility mode but fails when compatibility mode is turned off.

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

Can anyone explain why this might happen, and how we can work around it? An example follows.

我们的ASPX页面包含

Our ASPX page contains

<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;。

The following Javascript statements should result in the wrapper variables containing objects but in some browsers, or compatibility modes in IE9, the value of jobAddressWrapper is null. The value of predefinedReplyWrapper is never null. The only difference between them is that JobAddressCheckboxWrapper has style="display:none;".

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

或

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

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

The HTML pattern with elements wrapped by a span is not relevant; there are other cases where elements are not wrapped by spans but can still not be reference if they have style="display:none;".

更新（回复评论等）：

1. $ get提供
   Sys.UI.DomElement类的getElementById方法的快捷方式。 此处提供更多信息


2. 这些调用是在onload和
   中调用的函数中进行的，以响应用户交互。在任何一种情况下都会出现问题。

推荐答案

这个答案可能与每个问题，但我在使用ASP.NET母版页时遇到了它;

this answer is perhaps not relevant to every instance of the problem, but I encountered it while using ASP.NET Master pages;

ContentPlaceHolderID =MainContent，我的div id =IdValidationErrorDiv实际上有一个渲染的id MainContent_IdValidationErrorDiv。

with ContentPlaceHolderID="MainContent", my div id="IdValidationErrorDiv" actually has a rendered id of "MainContent_IdValidationErrorDiv".

使用此ID成功调用getElementById。

calling getElementById with this id succeeded.

这篇关于当display：none时，getElementById（）无法获取元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！