표시 할 때 getElementById()가 요소를 가져 오지 못함 : 없음

Question

찾고있는 요소가 style="display:none;" 인 경우 $get('foo') 또는 document.getElementById('foo')의 몇 가지 사례가 실패합니다. 이것은 일부 브라우저에서는 작동하지만 다른 브라우저에서는 작동하지 않는 것 같습니다. 구체적으로 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> 

객체를 포함하는 래퍼 변수에 있지만 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'); 

스팬 래핑 요소와 HTML 패턴은 관련이 없다; 요소가 범위에 의해 랩핑되지 않지만 style="display:none;" 인 경우 여전히 참조가 될 수없는 다른 경우가 있습니다.

업데이트 (의견에 응답 등) :

1. $ 얻을은 Sys.UI.DomElement 클래스의에서 getElementById 방법에 대한 바로 가기를 제공합니다. More info here
2. 이러한 호출은 사용자 상호 작용에 대한 응답으로 onload 및 이라는 두 함수에서 수행됩니다. 두 경우 모두 문제가 발생합니다.

Answer 1

이것은 정말로 이상한 문제이므로, 오타와 범위 혼동에 대한 코드를 먼저 확인하십시오. 또한 실제로 이것은 입니다. 잘하면이 문제는 아직 해결되지 않았습니다. =)

한 가지 해결책은 이러한 문제를 해결하기 위해 노력하거나 더 나은 원인을 찾는데 도움이되는 경우가 많습니다. jQuery 선택 $('#AnyID')을 사용하십시오. 익숙하지 않은 경우 css # 구문을 기억하십시오.

브라우저는 먼 길을 가기 위해 더 많은 호환을 시도하는 데 많은 시간을 보냈습니다. 이전에 jQuery를 사용하여 바닐라 JS 명령어가 한 브라우저에서 의도했던 방식대로 작동하지 않고 왜 다른 브라우저에서 작동하는지 추론했습니다. 보통 나는 JS를 충분히 이해하지 못했고 jQuery는 내가 필요한 것을 이미 알고 있다는 것을 알게되었다. =)

Answer 2

이 답변은 아마도 모든 문제와 관련이 없을 지 모르지만 ASP.NET을 사용하는 동안 발생했다. 마스터 페이지;

with ContentPlaceHolderID = "MainContent", 내 div id = "IdValidationErrorDiv"의 렌더링 ID는 실제로 "MainContent_IdValidationErrorDiv"입니다.

이 ID로 getElementById를 호출하는 것이 완료되었습니다.