[JQUERY] 자바 스크립트 / jQuery를에 구문 분석 CSS

자바 스크립트 / jQuery를에 구문 분석 CSS

해결법

1. ---

   1.JSCSSP라는 자바 스크립트로 작성된 CSS 파서가있다

   JSCSSP라는 자바 스크립트로 작성된 CSS 파서가있다

2. ---

   2.당신은 쉽게 구문 분석 CSS로 브라우저 자체의 CSSOM을 사용할 수 있습니다 :

   당신은 쉽게 구문 분석 CSS로 브라우저 자체의 CSSOM을 사용할 수 있습니다 :

   var rulesForCssText = function (styleContent) {
       var doc = document.implementation.createHTMLDocument(""),
           styleElement = document.createElement("style");
   
      styleElement.textContent = styleContent;
       // the style will only be parsed once it is added to a document
       doc.body.appendChild(styleElement);
   
       return styleElement.sheet.cssRules;
   };
   

   각 규칙은 rule.style의 속성을 볼 수 돌아왔다. 예제 http://jsfiddle.net/v2JsZ/를 참조하십시오.

3. ---

   3.스펙에 정의 된 가장 바보 - 증거 파서를 작성하려면, 토큰 화 및 CSS 문법에 대한 정확한 규칙을 따릅니다. 당신이 잉크에 의해 사양을 구현 할 필요가 없습니다. 당신은 당신이 가장 가능성이 발생하고 거기에서 전개하도록 작은 부품 및 CSS와 함께 시작할 수 있습니다. 더 좋은, 모두 전체 프로세스를 생략하고이하지 않는 한 매튜의 솔루션은 학습 운동입니다 @ 함께 할 것입니다.

   스펙에 정의 된 가장 바보 - 증거 파서를 작성하려면, 토큰 화 및 CSS 문법에 대한 정확한 규칙을 따릅니다. 당신이 잉크에 의해 사양을 구현 할 필요가 없습니다. 당신은 당신이 가장 가능성이 발생하고 거기에서 전개하도록 작은 부품 및 CSS와 함께 시작할 수 있습니다. 더 좋은, 모두 전체 프로세스를 생략하고이하지 않는 한 매튜의 솔루션은 학습 운동입니다 @ 함께 할 것입니다.

   다양한 어휘 스캐너와 자바 스크립트를 사용할 수 파서 생성기가 있습니다. 전체 문법 (W3)의 웹 사이트에서 사용할 수 있습니다. 다시 일을 왜 당신은 단순히 자바 스크립트에서 파서를 생성하는 파서 생성기를 사용할 수있을 때.

   CSS에 대한 생산 규칙은 아래와 같습니다.

   stylesheet
     : [ CHARSET_SYM STRING ';' ]?
       [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]*
       [ [ ruleset | media | page ] [ CDO S* | CDC S* ]* ]*
     ;
   import
     : IMPORT_SYM S*
       [STRING|URI] S* media_list? ';' S*
     ;
   media
     : MEDIA_SYM S* media_list LBRACE S* ruleset* '}' S*
     ;
   media_list
     : medium [ COMMA S* medium]*
     ;
   medium
     : IDENT S*
     ;
   page
     : PAGE_SYM S* pseudo_page?
       '{' S* declaration? [ ';' S* declaration? ]* '}' S*
     ;
   pseudo_page
     : ':' IDENT S*
     ;
   operator
     : '/' S* | ',' S*
     ;
   combinator
     : '+' S*
     | '>' S*
     ;
   unary_operator
     : '-' | '+'
     ;
   property
     : IDENT S*
     ;
   ruleset
     : selector [ ',' S* selector ]*
       '{' S* declaration? [ ';' S* declaration? ]* '}' S*
     ;
   selector
     : simple_selector [ combinator selector | S+ [ combinator? selector ]? ]?
     ;
   simple_selector
     : element_name [ HASH | class | attrib | pseudo ]*
     | [ HASH | class | attrib | pseudo ]+
     ;
   class
     : '.' IDENT
     ;
   element_name
     : IDENT | '*'
     ;
   attrib
     : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
       [ IDENT | STRING ] S* ]? ']'
     ;
   pseudo
     : ':' [ IDENT | FUNCTION S* [IDENT S*]? ')' ]
     ;
   declaration
     : property ':' S* expr prio?
     ;
   prio
     : IMPORTANT_SYM S*
     ;
   expr
     : term [ operator? term ]*
     ;
   term
     : unary_operator?
       [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
         TIME S* | FREQ S* ]
     | STRING S* | IDENT S* | URI S* | hexcolor | function
     ;
   function
     : FUNCTION S* expr ')' S*
     ;
   /*
    * There is a constraint on the color that it must
    * have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])
    * after the "#"; e.g., "#000" is OK, but "#abcd" is not.
    */
   hexcolor
     : HASH S*
     ;
   

4. ---

   4.간단한 예를 들어,하지 테스트를하지만, 나는 내 프로젝트에서 유사한 사용하고 작동해야합니다.

   간단한 예를 들어,하지 테스트를하지만, 나는 내 프로젝트에서 유사한 사용하고 작동해야합니다.

   var div = jQuery('<div/>');
   div[0].style = 'position:absolute;left:5px;top:10px;'; //Css to parse
   
   div.css('left'); // => '5px'
   div.css('top'); // => '10px'
   div[0].style; // => Object containing all css
   

from https://stackoverflow.com/questions/3326494/parsing-css-in-javascript-jquery by cc-by-sa and MIT license