런타임상에서
<style> 엘리먼트에
CSS를 추가하는 방법이 때에따라 필요할때가 있다.
원래 <style> 태그는 <head>요소안에 정의되는것을 원칙으로 한다. 그러다보니 주로 페이지가 로딩되는 시점에
link rel로
import를 해서 적용을 많이 하는데...만약 지정된
CSS를 로딩시점에 추가하지 못할경우 런타임에 적용해야할 필요성이
존재한다.
물론 이것은 기본 개별 엘리먼트에 적용된
cssRule은 배제된다.
body, p, #test 처럼 룰이 지칭된 모든 요소에 일괄 적용을 하기 위함이다.실제
AshAPI / AshUtil.document 패키지에서는 다음과 같은 메소드가 존재한다.
금일 갑작스레
AS에서
JS를 제어할때 런타임 로드할때 필요하게 되어 생각난 김에 포스팅을 해본다.
F ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/**
*@ Adds the specified full syntax of CSS within style element in runtime.
* paramters |
- cssFullSyntax:String // ex ( "body, a { color:#ff0000; font-size:12px; }" )
- (optional) index:uint = 0; // Integer index value of style element from head element.
*/
AshUtil.document.runtimeAddCSS = function(cssFullSyntax, index) {
var styleSheet;
if(!document.getElementsByTagName('style')[index || 0]) {
document.getElementsByTagName('head')[0].appendChild(document.createElement('style'));
styleSheet = document.styleSheets[0];
}else styleSheet = document.styleSheets[index || 0];
if(AshUtil.browser.ie) {
var selectors = cssFullSyntax.replace(/\{.*/,'').split(','), style = cssFullSyntax.replace(/^.*\{/,'').replace(/\}.*$/,'');
for(var l = selectors.length, i = 0; i < l; i++) styleSheet.addRule(selectors[i], style);
}
else styleSheet.insertRule(cssFullSyntax, styleSheet.rules.length);
}
/**
*@ Replaces from old defined css syntax to the specified full syntax of CSS within style element in runtime.
* paramters |
- cssFullSyntax:String // ex ( "body, a { color:#ff0000; font-size:12px; }" )
- (optional) index:uint = 0; // Integer index value of style element from head element.
*/
AshUtil.document.runtimeReplaceCSS = function(cssFullSyntax, index) {
var styleSheet;
if(!document.getElementsByTagName('style')[index || 0]) {
document.getElementsByTagName('head')[0].appendChild(document.createElement('style'));
styleSheet = document.styleSheets[0];
}else styleSheet = document.styleSheets[index || 0];
if(AshUtil.browser.ie) for(var i = styleSheet.rules.length-1; i >= 0; i--) styleSheet.removeRule(i);
else for(var i = styleSheet.cssRules.length-1; i >= 0; i--) styleSheet.deleteRule(i);
AshUtil.document.runtimeAddCSS(cssFullSyntax, index);
}
/**
*@Get the full syntax of CSS within style element
* paramters |
- (optional) index:uint = 0; // Integer index value of style element from head element.
*/
AshUtil.document.getCSSInStyleElement = function(index) {
return document.getElementsByTagName('style')[index || 0].innerHTML;
}
우선 표준
CSS룰을 적용함에 있어
IE와 다른 브라우져(DOM)과는 역시
크로싱처리가 필요하다.언제나 그렇듯
IE는 홀로 독단적으로
standard와 힘겨운 싸움을 시작하고 있다.
하지만 왠지 응원은 하고 싶지않다.. 휴..
한가지 재미있는 사실은
style자체도 엘리먼트 이기때문에
DOM의
innerHTML속성을 부여받을수 있다.
물론 이것은
IE에서도 가능하지만
ie에서는
style,
head, 같은 경우
read-
only로 제한한다.
위에서 적용한 방식은 표준
DOM처리방식이다.
하지만 만약 아래와 같이 해버린다면?
document.getElementsByTagName('style')[index || 0].innerHTML = 'body, A, P { font-size:20px; }';
이게 가능할까? ie를 제외한 다른브라우져 에서는
read-
only가 아니니까..
일단 위의
AshUtil.
document.
getCSSInStyleElemen 에서는 본인도 이미 읽어올땐 사용을 하고 있다.
물론 이것은
acid3 test에서 100점을 받은 safari계열의 브라우져(chrome)을 제외하고 FF/Opera에서는 가능하다.하지만 크로싱이 안되는 이유로 일단은 저렇게도 될수 있다 정도로만 이해를 하면..되겠다.
1
LINK • SUMMARY
Share related link.
A Platform Evangelist Lee Brimelow's blog at Adobe.
- 
- 