Page 1 of 1

JS로 CSS stylesheet 수정하기

Posted: 2005 01 12 13:11 36
by 빛알갱이
http://www.iabf.or.kr
에 가면 글자 크기 조절 단추가 있습니다. 하지만, Mozilla에서 동작하지 않습니다.
그 이유는 거기서 MS IE에서만 지원되는 방법으로 stylesheet를 수정하고 있기 때문입니다.

http://www.quirksmode.org/dom/w3c_css.html


에서 비교 표를 제공하고 있고, 아래 사이트에서 여러 브라우저를 지원하기 위한 방법을 제시하고 있습니다.

http://www.quirksmode.org/dom/changess.html
http://www.howtocreate.co.uk/tutorials/ ... =0&part=27

IABF의 경우 비교적 쉽게 고칠 수 있었습니다. 그 고친 결과는
http://jshin.net/w3/iabf

에 있습니다. 표준과 접근성 측면에서 다른 것도 고칠 것이 많지만, 우선 글자 크기 조절하는 기능과 몇 가지 자잘한 것만 고쳤습니다. 자잘하게 고친 것은 CSS 문법 틀린 것, CSS charset 미지정, HTML DOCTYPE 미지정, Javascript에 대한 type 미지정, charset 지정을 위한 meta tag의 위치 틀린 것 등입니다.

여기에 이것을 올리는 이유는 위와 같은 문제가 흔히 나타날 것 같기 때문입니다.

stylesheet의 CSS rule을 바꾸는 방법에는 다음 3가지가 있는데, 그 중 세번째것이 호환성이 가장 높습니다. (단, MS IE의경우 'cssRules' 대신 'rules'를 써야 합니다.) IABF 사이트의 경우 1번 방법을 썼기 때문에 모질라에서 제대로 동작하지 않은 것입니다.

1. document.styleSheets[1].cssText;
returns
the content of the entire style sheet
2. document.styleSheets[1].cssRules[1].cssText;
returns
pre {color: #990000; font-weight: 600}
3. document.styleSheets[1].cssRules[1].style.cssText;
returns
color: #990000; font-weight: 600

Only Explorer 5 Mac supports all three ways.
Only the third way is cross-browser compatible.

You can write to style.cssText:
[rule].style.cssText = 'color: #cc0000';
Note that Explorer Mac adds the new style to the CSS, instead of replacing all old styles by the new style, as Explorer Windows, Mozilla and Safari do.

좋은 의견 감사합니다

Posted: 2005 01 12 14:01 49
by 현준호
저는 정보통신 접근성 향상 표준화 포럼(http://www.iabf.or.kr)을 운영하고 있는 현준호라고 합니다.

먼저 저희 포럼 홈페이지 문제점을 지적해 주셔서 감사합니다.


지적하신 부분들을 최대한 빨리 시정토록 노력하겠습니다.

감사합니다

현준호 올림

Posted: 2005 01 12 22:29 24
by 빛알갱이
매우 신속하게 - 거의 실시간으로 - 시정을 해 주셔서 대단히 감사합니다.