当查找的元素具有style="display:none;"
时,我们有几种情况$get('foo')
或document.getElementById('foo')
失败。这似乎适用于某些浏览器,但不适用于其他浏览器;特别是下面显示的情况在IE9兼容模式下正常工作,但在兼容模式关闭时失败。getElementById()在显示时无法获取元素:无
任何人都可以解释为什么会发生这种情况,以及我们如何解决它?一个例子如下。
我们的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的值不会为空。它们之间唯一的区别是JobAddressCheckboxWrapper有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;"
,则仍然无法引用。
更新(在响应评论等):
- $获取提供了一个快捷方式 Sys.UI.DomElement类的getElementById方法。 More info here
- 这些调用是在onload和 两种函数中进行的,以响应用户交互。无论哪种情况都会发生问题。
什么是'$ get'?何时/如何执行js的这些行? – Bergi
史蒂夫,你说的听起来真的很奇怪。 getElementById查找当前DOM树中存在的任何内容,而不管设置了什么显示属性。 – shabunc
也请编辑该问题以尽可能保持自身一致性,在这种情况下,仅仅为解释当前问题中使用的术语而提供另一个问题的链接并不是最佳解决方案。 – shabunc