document.getElementById가 크로스브라우징이 안되네요. 정보
document.getElementById가 크로스브라우징이 안되네요.
본문
document.getElementById 설정에 대해 질답게시판에 질문을 올렸습니다.
http://sir.co.kr/bbs/tb.php/g4_qa/149639
많은 분들께서 관심을 가지고 살펴주셨는데,
'멀미안녕'님께서 주신 답변을 적용해 보니 바로 해결되었습니다.
그런데...
추가로 답변주신 아미가님 말씀처럼 스크립트가 익스 외에는 적용되지 않네요.
아미가님 말씀으로는 document.getElementById가 웹표준이지만,
document.all이 먹히는 경우가 있다고 하셨는데,
과연 그 말씀대로 익스 외에 다른 브라우저에서는 작동하지 않습니다.
그래서, document.all로 변경해서 적용해 봤지만 여전히 변화가 없네요.
(물론, 추가적으로 다른 변경이 필요한 것이겠지만, 제가 JS는 전혀 지식이 없어서요.)
크로스브라우징이 가능하려면 위 스크립트를 어떻게 변경해 주어야 하는지,
JS 고수님들께서 조언해 주시면 감사하겠습니다.
http://sir.co.kr/bbs/tb.php/g4_qa/149639
많은 분들께서 관심을 가지고 살펴주셨는데,
'멀미안녕'님께서 주신 답변을 적용해 보니 바로 해결되었습니다.
그런데...
추가로 답변주신 아미가님 말씀처럼 스크립트가 익스 외에는 적용되지 않네요.
아미가님 말씀으로는 document.getElementById가 웹표준이지만,
document.all이 먹히는 경우가 있다고 하셨는데,
과연 그 말씀대로 익스 외에 다른 브라우저에서는 작동하지 않습니다.
그래서, document.all로 변경해서 적용해 봤지만 여전히 변화가 없네요.
(물론, 추가적으로 다른 변경이 필요한 것이겠지만, 제가 JS는 전혀 지식이 없어서요.)
크로스브라우징이 가능하려면 위 스크립트를 어떻게 변경해 주어야 하는지,
JS 고수님들께서 조언해 주시면 감사하겠습니다.
추천
0
0
댓글 21개

function time_box() {
var getStyle = document.getElementById("time").style;
if (getStyle.display == "none")
getStyle.display = "";
else
getStyle.display = "none";
}
이렇게 해보세요. 그냥 단순한 변수 이름과 값으로 할 시에는 문제가 있습니다.
var getStyle = document.getElementById("time").style;
if (getStyle.display == "none")
getStyle.display = "";
else
getStyle.display = "none";
}
이렇게 해보세요. 그냥 단순한 변수 이름과 값으로 할 시에는 문제가 있습니다.

주신 답변대로 곧바로 실행해 보았는데, 안되네요.
스크립트 외에 제가 적용한 다른 소스에서의 착오일까요?
스크립트 외에 제가 적용한 다른 소스에서의 착오일까요?

각각에 id 를 주어 모두 닫으면 되지요.

각각에 id를 준다는 말씀은... 어떻게 해야 하는지요?
제가 JS 방식은 전혀 몰라서요.
제가 JS 방식은 전혀 몰라서요.
되는가요?! 한번 테스트 해보고 말쓰주세요!!
<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>
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";
}
}
}
}
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";
}
}
}
}
time이라는 php의 예약어를 쓰는것은 별로 안좋은 방법인거 같아요.
element의 이름도 함 바꿔보세요.
element의 이름도 함 바꿔보세요.

넵, 안그래도 php 언어랑 중복될 것 같아 변경했습니다.

아... 집안 일이 있어 잠시 나갔다 들어왔습니다.
많은 분들께서 도움을 주셨는데...
이거 참... 선무당이 사람 잡는다고...
제대로 된 지식이 없으니, 많은 고수님들을 힘들게 한 것 같아 죄송합니다.
그런데, 스크립트가 적용될 id(time)를 td가 아닌, col에 주었는데 이것이 문제인 것 같기도 하네요.
위에 고수님들께서 알려주신 내용이 현재까지는 계속... 적용이 잘 안되네요.
(저의 무지함 탓입니다.ㅠㅠ)
많은 분들께서 도움을 주셨는데...
이거 참... 선무당이 사람 잡는다고...
제대로 된 지식이 없으니, 많은 고수님들을 힘들게 한 것 같아 죄송합니다.
그런데, 스크립트가 적용될 id(time)를 td가 아닌, col에 주었는데 이것이 문제인 것 같기도 하네요.
위에 고수님들께서 알려주신 내용이 현재까지는 계속... 적용이 잘 안되네요.
(저의 무지함 탓입니다.ㅠㅠ)

제 방법은 써보셨나요?
해당되는 열에 대한 td에 모두 time 이라는 클래스(id 아님)를 주면 됩니다.
해당되는 열에 대한 td에 모두 time 이라는 클래스(id 아님)를 주면 됩니다.

스크립트 문제가 아니고 익스와 다른 브라우저 간의 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과 파폭에서 정상적으로 보입니다.
다른 버전 다른 브라우저에서는 테스트 못했습니다. ^^;
때문에 크로스 브라우징이 가능하게 하려면 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문에는 한번만 넣어주면 되니까 상관 없겠지요?
스크립트가 적용될 td 영역이 for문으로 작동하는 것인데,
for문에는 한번만 넣어주면 되니까 상관 없겠지요?

괜찮으시다면 원격 해드려도 될까요? 쪽지주세요.

네이트가 없어서, 쪽지 드렸습니다.
크게 신경 써 주셔서 정말 감사드립니다.
크게 신경 써 주셔서 정말 감사드립니다.

멀미안녕님, 도움을 주셨는데, 제가 따라가지 못해 무척 죄송합니다.
해결하기 위해 고수님들의 팁을 따라 해 보았는데도,
초기 화면에 display되지 않은 상태로 뜨더군요.
그래서 col태그 이하 해당 td에 모두 display:none;을 해 주니까, 숨겨지더군요.
그러나, 아직도 해결은 되지 않았구요.
말씀하신 대로 다시 한번 테스트해 보겠습니다.
해결하기 위해 고수님들의 팁을 따라 해 보았는데도,
초기 화면에 display되지 않은 상태로 뜨더군요.
그래서 col태그 이하 해당 td에 모두 display:none;을 해 주니까, 숨겨지더군요.
그러나, 아직도 해결은 되지 않았구요.
말씀하신 대로 다시 한번 테스트해 보겠습니다.

<col 태그는 해석이 되는 브라우져가 있고..
안되는 브라우져가 있습니다.
저도 처음에는 했다가..
빼버렸습니다.
안되는 곳이 많더라고요..
td에다가 일괄적으로 적용하는 것이 좋습니다.
안되는 브라우져가 있습니다.
저도 처음에는 했다가..
빼버렸습니다.
안되는 곳이 많더라고요..
td에다가 일괄적으로 적용하는 것이 좋습니다.
jQuery를 이용하시고,
조건을 걸어서 주는 편이 더 나을것같습니다.
자식노드배열마다, style조건을 걸어주면..
크로스브라우징이 가능합니다. 자세히 알고싶으시다면, 말씀해주세요.
예제 작성해드리겠습니다.
조건을 걸어서 주는 편이 더 나을것같습니다.
자식노드배열마다, style조건을 걸어주면..
크로스브라우징이 가능합니다. 자세히 알고싶으시다면, 말씀해주세요.
예제 작성해드리겠습니다.