JS로 CSS stylesheet 수정하기

[빛알갱이]

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.

[현준호]

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

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


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

감사합니다

현준호 올림

[빛알갱이]

매우 신속하게 - 거의 실시간으로 - 시정을 해 주셔서 대단히 감사합니다.