Mozilla 한국 커뮤니티

스킨을 하나 만들면서 해상도에 따른 레이어 고정 방법을 알아 냈는데요;;
문제는 body.clientWidth 가 IE 전용이라는 것;; (>.<)
그래서 document.getElementById를 이용해서 불여우에서도 잘 돌려보려고 합니다.
그런데 잘 안되네요.

<div></div>

이런식으로 되어 있는 걸 고쳐야 하는데요.

PHPSCHOOL에 보니~

var xx = screen.availWidth / 2 + 940 / 2 + 'px'; // 940 은 좌측 x 시작점으로부터의 위치 입니다.
document.getElementById('div').style.left = xx;

위와 같은 코드로도 변경을 하면 된다고 하는데 어떻게 스크립트를 짜야할지 모르겠네요. ('' )
조언 부탁드립니다. (>.<)
크로스 브라우징이 생각보다 쉽지 않네요~

그 코드 그냥 그대로 쓰시면 됩니다.

예를 들어

<style type="text/css">
#box01 {position:absolute; width:120px; height:320px; border:solid 1px #090909;}
</style>

<div id="box01">
box01
</div>

이런 요소의 위치를 정하려고 한다면

var box01left = screen.availWidth / 2 + 940 / 2;
document.getElementById("box01").style.left = box01left + "px";

이 스크립트를 페이지가 로드될 때 호출하시거나 태그 아래에 쓰시면 됩니다. 페이지가 로드될 때 호출하시는 편이 낫겠지요.

예전 글이지만 나중에 참고하시라고 댓글답니다.

사용자가 브라우저 창의 크기를 바꾸는 걸 생각한다면 아래처럼 쓰셔야 하겠네요.
그런데 스크립트로 요소의 가로 위치를 잡아주면 페이지가 로드된 후에는 다시 로드되기 전까지는 안 바뀝니다. 페이지 재로드없이 창의 크기를 움직이면 이 요소만 고정된 위치에 있게 되죠. 가로 위치는 처음에 css로 잡아주는 것이 제일 좋은 것 같아요.

var box01left = document.documentElement.scrollWidth / 2 + 940 / 2;
document.getElementById("box01").style.left = box01left + "px";

document.body.clientWidth/Height 는 IE 전용이 아니고 거의 모든 브라우저에서 지원합니다.


dtd에 따라 body 와 documentElement 를 변경해서 적용해야 하고

스크롤 너비인지 일반 너비인지에 따라 clientWidth, scrollWidth, offsetWidth 를 적절히 쓰면 되고 getBoundingClientRect() 를 쓰는 것도 좋습니다.