JS로 CSS stylesheet 수정하기
Posted: 2005 01 12 13:11 36
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.
에 가면 글자 크기 조절 단추가 있습니다. 하지만, 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.