Runtime시에 실시간으로 자바스크립트로 스타일시트를 변경하기 위해서는 두 가지 방법이 존재한다. 두 개의 스타일시트 클래스를 만들어 놓고 Object의 Class 속성을 변경하는 방법이 가장 많이 쓰이는 방법이나, 이는 변경의 폭이 매우 제한적이다. 또 다른 방법은 스타일시트 자체를 변경해 주는 것이다.
두 방법 모두 브라우저 간에 방법이 다르기 때문에 Cross Browsing 문제에 대해 신경을 써야 한다. 본 포스트에서는 두 번째 방법에 대해서만 설명한다.
개체의 width는 30으로, height은 15로 조절하고 싶을 때
IE의 경우obj.style.cssText="width:30px; height:15px;";
비 IE 브라우저의 경우obj.style.width="30px;";
obj.style.height="15px;";
IE가 좀 더 편한 듯 보이나, 위 예제 후 width를 제외한 height만 다시 변경할 경우를 보자.
개체의 height만 25로 조절하고 싶을 때
IE의 경우obj.style.cssText="width:30px; height:25px;";
비 IE 브라우저의 경우obj.style.height="25px;";
IE의 경우 height 속성만 적어주면 width 속성이 초기화되기 때문에 두 속성을 모두 적어주어야 하지만 비 IE 브라우저의 경우 속성별로 조절을 해 줄 수 있기 때문에 스타일을 자주 변경할 경우에는 비 IE 브라우저가 더 편하다.
2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
TAG Cross Browsing,
CSS,
Firefox,
height,
IE,
Internet Explorer,
Javascript,
Microsoft,
Stylesheet,
width,
스타일시트,
자바스크립트
댓글을 달아 주세요