document.getElementById가 크로스브라우징이 안되네요. > 자유게시판

자유게시판

document.getElementById가 크로스브라우징이 안되네요. 정보

document.getElementById가 크로스브라우징이 안되네요.

본문

document.getElementById 설정에 대해 질답게시판에 질문을 올렸습니다.

http://sir.co.kr/bbs/tb.php/g4_qa/149639

많은 분들께서 관심을 가지고 살펴주셨는데,
'멀미안녕'님께서 주신 답변을 적용해 보니 바로 해결되었습니다.



그런데...
추가로 답변주신 아미가님 말씀처럼 스크립트가 익스 외에는 적용되지 않네요.

아미가님 말씀으로는 document.getElementById가 웹표준이지만,
document.all이 먹히는 경우가 있다고 하셨는데,
과연 그 말씀대로 익스 외에 다른 브라우저에서는 작동하지 않습니다.

그래서, document.all로 변경해서 적용해 봤지만 여전히 변화가 없네요.
(물론, 추가적으로 다른 변경이 필요한 것이겠지만, 제가 JS는 전혀 지식이 없어서요.)

크로스브라우징이 가능하려면 위 스크립트를 어떻게 변경해 주어야 하는지,
JS 고수님들께서 조언해 주시면 감사하겠습니다.
추천
0
  • 복사

댓글 21개

function time_box() {
  var getStyle = document.getElementById("time").style;
  if (getStyle.display == "none")
      getStyle.display = "";
  else
      getStyle.display = "none";
}

이렇게 해보세요. 그냥 단순한 변수 이름과 값으로 할 시에는 문제가 있습니다.
주신 답변대로 곧바로 실행해 보았는데, 안되네요.
스크립트 외에 제가 적용한 다른 소스에서의 착오일까요?
<script language="javascript">
function time_box() {
  var getStyle = document.getElementById("time").style;
  if (getStyle.display == "none")
      getStyle.display = "";
  else
      getStyle.display = "none";
}
</script>
<div  onclick="time_box()">이걸 클릭하면 생기고 없어집니다.</div>
<div id="time" style="width:100px; height:100px; display:block"
dddddddddddddddddddddddddddddddddddddd
</div>
우선 td class="time 다른클래스" 이런식으로 주고나서 하세요.

function time_box() {
  var getTD = document.getElementsByTagName("td");
  for (i = 0; i < getTD.length; i++) {
      var getClass = getTD[i].getAttribute("class").split(" ");
      var getStyle = getTD[i].style;
      for (k = 0; k < getClass.length; k++) {
        if(getClass[k] == "time") {
            if(getStyle.display == "none")
              getStyle.display = "";
            else
              getStyle.display = "none";
        }
      }
  }
}
아... 집안 일이 있어 잠시 나갔다 들어왔습니다.
많은 분들께서 도움을 주셨는데...
이거 참... 선무당이 사람 잡는다고...
제대로 된 지식이 없으니, 많은 고수님들을 힘들게 한 것 같아 죄송합니다.

그런데, 스크립트가 적용될 id(time)를 td가 아닌, col에 주었는데 이것이 문제인 것 같기도 하네요.
위에 고수님들께서 알려주신 내용이 현재까지는 계속... 적용이 잘 안되네요.
(저의 무지함 탓입니다.ㅠㅠ)
스크립트 문제가 아니고 익스와 다른 브라우저 간의 col 태그 해석 차이로 보입니다.
때문에 크로스 브라우징이 가능하게 하려면 col 태그를 포기하셔야 할 것 같습니다.

div로 표를 만들거나 아니면 col 태그 없이 일반적인 테이블로 표를 만들어보세요.
예를 들어, col 태그를 사용해 4열의 테이블을 구성했다고 가정하면 아래처럼 하셨겠지요.

<table cellspacing="0" cellpadding="0">
<col span="2" width="100" /><col id="time" style="display:none" /><col width="100" />
  <tr><td>1번</td><td>2번</td><td>3번</td>td>4번</td></tr>
                      ...반복...
  <tr><td>1번</td><td>2번</td><td>3번</td>td>4번</td></tr>
</table>

그걸 아래처럼 col 태그 없이 아래처럼 일반적(?)인 테이블 구성해보세요.
 
<style type="text/css"> .test td { width:100px; text-align:center } </style>
<table class="test" cellspacing="0" cellpadding="0">
  <tr><td>1번</td><td>2번</td>
    <td id="time" style="display:none" rowspan="줄 갯수">
      <table cellspacing="0" cellpadding="0">
        <tr><td>3번</td></tr>
            ...3열 반복...
        <tr><td>3번</td></tr>
      </table>
    </td><td>4번</td></tr>
  <tr><td>1번</td><td>2번</td><td>4번</td></tr>
                ... 1, 2, 4열 반복...
  <tr><td>1번</td><td>2번</td><td>4번</td></tr>
</table>

이런 형태로 테이블을 짜면 익스6과 파폭에서 정상적으로 보입니다.
다른 버전 다른 브라우저에서는 테스트 못했습니다. ^^;
아 그런가요...
스크립트가 적용될 td 영역이 for문으로 작동하는 것인데,
for문에는 한번만 넣어주면 되니까 상관 없겠지요?
멀미안녕님, 도움을 주셨는데, 제가 따라가지 못해 무척 죄송합니다.
해결하기 위해 고수님들의 팁을 따라 해 보았는데도,
초기 화면에 display되지 않은 상태로 뜨더군요.

그래서 col태그 이하 해당 td에 모두 display:none;을 해 주니까, 숨겨지더군요.
그러나, 아직도 해결은 되지 않았구요.

말씀하신 대로 다시 한번 테스트해 보겠습니다.
<col 태그는 해석이 되는 브라우져가 있고..
안되는 브라우져가 있습니다.

저도 처음에는 했다가..
빼버렸습니다.
안되는 곳이 많더라고요..

td에다가 일괄적으로 적용하는 것이 좋습니다.
jQuery를 이용하시고,
조건을 걸어서 주는 편이 더 나을것같습니다.
자식노드배열마다, style조건을 걸어주면..

크로스브라우징이 가능합니다. 자세히 알고싶으시다면, 말씀해주세요.
예제 작성해드리겠습니다.
© SIRSOFT
현재 페이지 제일 처음으로