div의 width 동적변환

[oragi]

작업하다가 몇가지 안되는 곳이 있어 질문합니다.

1.프로그래스 바를 만들려고 하는데요. 프로그래스바의 width값을
동적으로 바꿔주려고 했는데 작동을 하지 않는군요.워낙 초보라
뭐가 문제인지 알수가 없네요.
asp부분에서 intIncrement값을 가져와서 반복적으로 더해주는
방식입니다만..
html코드부분
....
<p align="center">쿼리실행중.......</p>
<div Id="wrap" align="Center">
<div Id="Left" style="width:200px; height:15px; border-width:1px; border-color:silver; border-style:solid" align="left">
<div Id="Prograssbar" style="width:0px; height:15px; background-color:#276EA5"></div>
</div>
</div>
...
자바스크립트부분
<SCRIPT LANGUAGE="JavaScript">
<!--
var intwidth= document.getElementById("Prograssbar").style.pixelWidth;
if (intwidth<200)
{ document.getElementById("Prograssbar").style.width=intwidth + <%=intIncrement%>;
}
//-->
</SCRIPT>



2. 제가 공부하는 교재엔 xml에 css를 쓰니 ie에선 스타일이 잘 먹히는데
파폭에서 보니 스타일이 먹히지 않네요. 어떻게 해야 파폭에서도 잘 보이는지
알고 싶습니다.

[박민권]

2. 제가 공부하는 교재엔 xml에 css를 쓰니 ie에선 스타일이 잘 먹히는데
파폭에서 보니 스타일이 먹히지 않네요. 어떻게 해야 파폭에서도 잘 보이는지
알고 싶습니다.

저도 이 부분에 질문을 올린적이 있었습니다.
viewtopic.php?t=2408&highlight=xml+%BD%BA%C5%B8%C0%CF

[박민권]

1.프로그래스 바를 만들려고 하는데요. 프로그래스바의 width값을
동적으로 바꿔주려고 했는데 작동을 하지 않는군요.워낙 초보라
뭐가 문제인지 알수가 없네요.
asp부분에서 intIncrement값을 가져와서 반복적으로 더해주는
방식입니다만..
html코드부분
....
<p align="center">쿼리실행중.......</p>
<div Id="wrap" align="Center">
<div Id="Left" style="width:200px; height:15px; border-width:1px; border-color:silver; border-style:solid" align="left">
<div Id="Prograssbar" style="width:0px; height:15px; background-color:#276EA5"></div>
</div>
</div>
...
자바스크립트부분
<SCRIPT LANGUAGE="JavaScript">
<!--
var intwidth= document.getElementById("Prograssbar").style.pixelWidth;
if (intwidth<200)
{ document.getElementById("Prograssbar").style.width=intwidth + <%=intIncrement%>;
}
//-->
</SCRIPT>

우선 <script language="javascript"> 이것을 아래처럼 고쳐주세요.
<script type="text/javascript">가 표준입니다.

Code: Select all

...style.pixelWidth

이 코드에서 pixelWidth 는 안써봐서 뭔지 잘 모르겠습니다.

Code: Select all

document.getElementById("Prograssbar").style.width=intwidth + ...

이 코드에서 안되는 이유는 아마도 단위가 빠졌기 때문이라 생각됩니다.
아래처럼 수정해보세요.

Code: Select all

....style.width = intwidth + 증가값 + 'px';

[oragi]

말씀해주신대로 수정해보았습니다.
ie에서 동작할땐 정말 기뻤는데 이게 파폭에선 나오질 않네요.
파폭에서 나올수 있는 방법이 없을까요?

ps. 또다른 답변 감사합니다.
너무 초보라 검색해봐도 뭐가 뭔지 잘 알수가 없었습니다.;;

[박민권]

말씀해주신대로 수정해보았습니다.
ie에서 동작할땐 정말 기뻤는데 이게 파폭에선 나오질 않네요.
파폭에서 나올수 있는 방법이 없을까요?

1번 문제가 나오질 않는다는 것인가요
아니면 2번문제가 나오질 않는다는 것인가요?

[oragi]

고치기 이전과 똑같이 width값이 0px인 상태가 지속되네요.
정상적이라면 조금씩 증가해야하는데요.
왜 파폭에서 이런지 알수가 없습니다.

[박민권]

고치기 이전과 똑같이 width값이 0px인 상태가 지속되네요.
정상적이라면 조금씩 증가해야하는데요.
왜 파폭에서 이런지 알수가 없습니다.

일단은 asp와 연동하지 마시고 js만으로 코드를 만들어서 테스트 해보세요.
그래도 안된다면 문제가 생기는 페이지의 링크를 걸어주시면 좀 더 좋은 답변을 얻을 수 있지 않을까 싶습니다.

[빛알갱이]

고치기 이전과 똑같이 width값이 0px인 상태가 지속되네요.
정상적이라면 조금씩 증가해야하는데요.
왜 파폭에서 이런지 알수가 없습니다.

pixelWidth는 비표준으로 IE에서만 됩니다. FF에서 javascript cosole만 한 번 열어 보셨다면 바로 아셨을 텐데...고생도 덜 하셨을 것이고요. 그냥 width를 쓰시고, 얻은 값을 parseInt로 묶으세요. style.width가 돌려 주는 값은 문자열이므로 parseInt를 써서 정수로 변환해야 합니다. 단위는 무시되고요. 같은 단위 (이 경우 px)를 일관되게 쓸 것이므로 상관 없습니다.
새로 값을 줄 때에는 이미 박민권님이 지적하신 대로 'px'를 끝에 붙이는 것을 잊지 마시고요.

var intwidth= parseInt(document.getElementById("Prograssbar").style.width);

처럼 하라는 뜻입니다.

이런 문제들은 다음 책에 보면 (한국어 번역판이 이미 오래 전에 나왔을 것입니다) 잘 나와 있습니다. 아래에 차니님이 번역해야겠다고 한 IBM 웹 사이트에 있는 글에서 참고 문헌으로 제시한 것이기도 하고요. 첫번째 책은 없어도 두번째 책은 제게 있습니다. 세세한 문제점이 잘 나와 있지요.

* Dynamic HTML: The Definitive Reference (2nd Edition) is great book that covers all aspects of cross-browser DHTML development (O'Reilly & Associates. Inc., 2002).

* JavaScript: The Definitive Guide (4th Edition) covers the latest (1.5) version of JavaScript, going into the small differences between browsers (O'Reilly & Associates, Inc., 2002).

[oragi]

완전히 해결을 보았습니다.
자바스크립트는 역시 잘 알기 어렵네요.^^;