style.display가 Firefox, Opera, Safari에서 작동하지 않음 - IE7 확인

StackOverflow https://stackoverflow.com/questions/10366

  •  08-06-2019
  •  | 
  •  

문제

나는 절대적인 위치에 있다 div 사용자가 링크를 클릭할 때 표시하고 싶은 항목입니다.그만큼 onclick 링크의 div 표시를 차단으로 설정하는 js 함수를 호출합니다(또한 시도함:"", inline, table-cell, inline-table, 등).이것은 IE7에서는 훌륭하게 작동하지만 제가 시도한 다른 모든 브라우저(FF2, FF3, Opera 9.5, Safari)에서는 전혀 작동하지 않습니다.

통화 전후에 알림을 추가해 보았는데 디스플레이가 다음과 같이 변경된 것으로 표시됩니다. none 에게 block 하지만 div 표시되지 않습니다.

나는 얻을 수 있습니다 div Firebug의 HTML 검사기를 사용하여 표시 값을 변경하는 경우(Firebug의 콘솔을 통해 javascript를 실행하지 않음) FF3에 표시합니다. 그래서 화면 밖에 표시되는 것이 아니라는 것을 알고 있습니다.

나는 다음을 포함하여 내가 생각할 수 있는 모든 것을 시도했습니다.

  • 다른 문서 유형(XHTML 1, HTML 4 등) 사용
  • 표시 블록/없음 대신 가시성 표시/숨김 사용
  • 함수 호출 대신 인라인 자바스크립트 사용
  • 다양한 기계에서 테스트하기

이 문제의 원인에 대한 아이디어가 있습니까?

도움이 되었습니까?

해결책 2

javascript를 사용하여 속성을 설정하는 것은 작동하지 않는 것 같았지만 Firebug의 검사를 사용하여 설정한 경우에는 작동했기 때문에 javascript ID 선택기가 손상된 것으로 의심되기 시작했습니다. 아마도 DOM에 동일한 ID를 가진 여러 항목이 있었을까요?소스에는 존재하는 것으로 표시되지 않았지만 자바스크립트를 사용하여 모든 div를 반복하면서 그런 경우가 있음을 발견했습니다.팝업을 표시하기 위해 사용한 함수는 다음과 같습니다.

function openPopup(popupID)
{
  var divs = getObjectsByTagAndClass('div','popupDiv');
  if (divs != undefined && divs != null)
  {
    for (var i = 0; i < divs.length; i++)
    {
      if (divs[i].id == popupID)
        divs[i].style.display = 'block';        
    }
  }
}

(유틸리티 함수 getObjectsByTagAndClass는 나열되지 않음)

이상적으로는 동일한 항목이 여러 번 삽입되는 이유를 알아내지만 렌더링 플랫폼을 제어할 수는 없고 해당 입력만 제어할 수 있습니다.

따라서 이와 같은 문제를 디버깅할 때, getElementById가 중단될 수 있는 DOM의 중복 ID를 확인하는 것을 잊지 마세요..

답변해주신 모든 분들께, 도움을 주셔서 감사합니다!

다른 팁

오류를 재현하는 일부 마크업을 제공할 수 있습니까?IE, FF3 및 Opera 9.5에서 작동하도록 할 수 있으므로 귀하의 상황은 귀하의 코드와 관련이 있을 것입니다.

function show() {
  var d = document.getElementById('testdiv');
  d.style.display = 'block';
}
#testdiv {
  position: absolute;
  height: 20px;
  width: 20px; 
  display: none;
  background-color: red;
}
<div id="testdiv"></div>
<a href="javascript:show();">Click me</a>

답을 찾았습니다.두 브라우저 모두에서 작동하려면 다음을 사용해야 합니다.

document.getElementById('editRow').style.display = '';

사실 저는 여기서 설명하는 것과 동일한 문제를 겪고 있었습니다.실제로 내 문제를 해결한 것은 문서 속성을 변경하는 것이었습니다.

이전 DOCTYPE/html 사양

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

다음으로 대체됨

<html>

오류 콘솔(Firefox 3의 도구 메뉴 > 오류 콘솔)을 확인하여 표시되지 않는 또 다른 오류가 발생하여 스크립트 작동이 중단되지 않는지 확인하세요.

div의 높이와 너비를 설정하고 Z-색인을 다른 것보다 높게 설정하여 div가 맨 위에 있는지 확인하세요.절대 위치 지정 div가 상대적 위치 지정 요소 내부에 있는 경우 해당 div의 위쪽 및 왼쪽 위치는 상대적 위치 지정 요소의 위쪽 및 왼쪽을 기준으로 합니다.div를 body 요소 바로 아래에 넣어보세요.

당신은 window.onload 방법:

window.onload = document.getElementById('testdiv').style.display='inline';

또는 변수를 만들 수도 있습니다.

var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';

Firefox 3.5에서는 성가신 디스플레이 오류가 있지만 IE7이나 Firefox 2.0.9에서는 그렇지 않습니다.

3개의 DIV 위치 절대값이 있습니다. 첫 번째는 일반 텍스트입니다.두 번째는 CSS 메뉴(UL 및 LI가 포함된 sucklefish 유형)이고 세 번째도 마찬가지입니다.세 번째는 W3C의 HTML 유효성 검사기로 코딩을 검사하고 완벽한 것으로 확인되었음에도 전혀 표시되지 않습니다.

임시 조치로 두 번째와 세 번째 DIV의 내용을 병합했습니다.

IE7과 FF2가 OK로 표시되지만 FF 3.5가 아닌 경우 Mozilla에서는 상황이 좋지 않습니다.

나는 당신에게 큰 힌트를 줄 것입니다:

<div style="..." class="..."> ... </div>

스타일이 있는 것이 있으면 document.style이 작동합니다!수업에 뭔가가 있으면 document.style에 표시되지 않으며 class="..."가 이를 무시합니다!

이것에 대해 생각하면 많은 문제가 해결될 것입니다.이 작은 이해 하나만으로 이 MIND VIRUS를 제거할 수 있습니다.좋은 하루 보내세요.건배, Ron Lentjes, LC CLS.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top