CSS style.display가 작동하지 않습니다.

Question

목록 상자 선택에 따라 표 행을 표시하거나 숨기려면 다음 JavaScript 함수가 있습니다.

function clock_Type(id) { 
    var clockSource = document.getElementById("clockSource"); 
    var clockType = document.getElementById("clockType"); 

    if(id == "1") { 
     if(navigator.appName == "Microsoft Internet Explorer") { 
      clockType.style.display = "inline"; 
      clockSource.style.display = "inline"; 
     } else { 
      clockType.style.display = "table-row"; 
      clockSource.style.display = "table-row"; 
     } 
    } else { 
     clockType.style.display = "none"; 
     clockSource.style.display = "none"; 
    } 
} 

다음은 목록 상자입니다.

<select id="clck" name="clock" class="selectStyle" style="width: 155px;" onchange="clock_Type(this.value)"> 
    <option value="0">Disabled</option> 
    <option value="1">Enabled</option> 
</select> 

목록 상자 변경 이벤트에서 제대로 작동합니다. 즉, 테이블 행이 숨겨지고 표시됩니다. 그러나 아래와 같이 다른 함수에서 JS 함수 clock_Type()을 호출하려고하면 테이블 행이 표시되지 않습니다. 나는 실행이 파이어 폭스

clockType.style.display = "table-row"; 
clockSource.style.display = "table-row"; 

에 대해 다음 섹션에 도달하지만 테이블 행이 표시지고하지 않는 코드를 추적

function foo() { 
    clock_Type(1); 
} 

. 어떤 아이디어가 여기에 문제가 될 수 있습니다. 미리 감사드립니다!

Answer 1

#clockType 및 #clockSource 요소에는 표시 스타일을 설정하는 CSS 클래스가 있습니까? 이 경우에는 그것을 제거하고 디스플레이 스타일을 인라인으로 설정하려고했습니다.

Answer 2

"table-row"또는 "inline"을 지정하는 대신 디스플레이를 빈 문자열로 설정하십시오. 이것은 요소에 기본 표시를 줄 것이므로, 스타일 시트에 display:none;을 지정하지 않으면 사용자 에이전트가 적절한 표시를 협상합니다.

clockType.style.display = ""; 
clockSource.style.display = ""; 

이렇게하면 브라우저 검사를 실행할 필요가 없으므로 좋지 않습니다.

편집 :

는 내가 전에 질문을 오해. 그러나 귀하의 코드 here을 테스트했으며 잘 작동하는 것으로 보입니다 (FF 3.5.3, Chrome 4, IE8에서 테스트 됨).