2012-08-23 36 views
2

当查找的元素具有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;",则仍然无法引用。

更新(在响应评论等):

  1. $获取提供了一个快捷方式 Sys.UI.DomElement类的getElementById方法。 More info here
  2. 这些调用是在onload和 两种函数中进行的,以响应用户交互。无论哪种情况都会发生问题。
+3

什么是'$ get'?何时/如何执行js的这些行? – Bergi

+0

史蒂夫,你说的听起来真的很奇怪。 getElementById查找当前DOM树中存在的任何内容,而不管设置了什么显示属性。 – shabunc

+0

也请编辑该问题以尽可能保持自身一致性,在这种情况下,仅仅为解释当前问题中使用的术语而提供另一个问题的链接并不是最佳解决方案。 – shabunc

回答

1

这真的是一个奇怪的问题,所以在其他任何事情检查代码错别字和范围混乱! 此外,这是真的,真的旧 - 所以希望你没有仍然有这个问题。 =)当你试图过去,这种问题要解决,甚至更好的找到自己的事业,但是你可能会发现,

一个解决方案会经常帮助。如果你不熟悉,请使用jQuery选择$('#AnyID'),注意css#语法。

浏览器已经走过了一段很长的路,试图更加兼容,还有很长的路要走。早些时候,我经常使用jQuery来推断为什么一个香草JS指令不能像我在一个浏览器中那样工作,而在另一个浏览器中工作。通常我会发现我不明白JS不够好和jQuery只知道已经是我需要学习=)

+0

谢谢,不要再有问题了。我忘记了究竟如何,但我们找到了一些解决方法。 –

1

这个答案也许是问题的每个实例不相关,但我同时使用ASP.NET遇到过主页;

with ContentPlaceHolderID =“MainContent”,我的div id =“IdValidationErrorDiv”实际上具有“MainContent_IdValidationErrorDiv”的渲染ID。

使用此ID成功调用getElementById。