CSS 파서/추출기? 스타일 시트를 객체로 변환하는 방법

스타일 시트를 객체로 구문 분석하는 jquery와 같은 자바 스크립트 프레임 워크에 대해 이미 표준 또는 안정적인 방법이 있습니까? 내가 궁금하네요 이유를CSS 파서/추출기? 스타일 시트를 객체로 변환하는 방법

두 가지 이유는 :

나는 누군가가 선택하지의 스타일 시트에 의해 설정된 스타일 속성을 얻는 방법을 알고 싶어 몇 가지 질문을 본 것을 선택기가 결국 계승되었습니다.
Sizzle이 예상 한대로라면 스타일 시트가 브라우저에서 제대로 렌더링되도록하는 솔루션이 될 수 있습니다. 기본적으로 jquery는 스타일 시트를 구문 분석하고 모든 속성을 수동으로 설정합니다 (브라우저 또는 알려진 구현되지 않은 선택기를 기반으로 할 수 있습니다.) 디자이너/개발자는 CSS3 스타일 시트를 작성하여 앞으로 호환되고 jquery/sizzle을 사용하여 브라우저가 얻은 작업을 수행합니다. '티.

내가 볼 수있는 유일한 단점이 여전히 CSS3 속성을 구현하지 것입니다,하지만 그것은 시작이다.

2010-02-09 Anthony

을 얻을, 스타일 시트는 이미 객체이다; 페이지가로드 될 때 트리로 파싱됩니다.

는 #page의 background-color 설정 무엇을 찾기 위해, 당신이해야 할 것,

#page { background-color: #fff; margin-top: 20px; margin-bottom: 20px; text-align: left; width: 100%; margin-top: 20px; padding: 0px; min-width: 900px; border: none; } 
#header { background-color: transparent; } 
#main { background-color: transparent; margin-left: 10px; margin-right: 10px; padding: 8px 0px 8px 0px;} 
#sidebar { margin-right: 12px; }

그 다음 줄이 포함되어 당신이

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <link href="/styles/global.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="/styles/catalog.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="/styles/banner.css" rel="stylesheet" type="text/css" media="screen"/>

및 global.css로 시작하는 HTML 페이지가 있다고 가정하자 document.styleSheets[0].cssRules[0].style.backgroundColor을 작성하면 #fff (또는 일부 브라우저에서는 rgb(255, 255, 255))이라고 표시됩니다. 위의 시트를 가정

기타 유용한 물건 : 당신이 #main div.header a, #main div.header a:visited 같은 더 복잡한 선택을 한 경우

document.styleSheets[0].cssRules[3].cssText //"#sidebar { margin-right: 12px; }" 
document.styleSheets[0].cssRules[2].selectorText //"#main"

가, 다음 선택 텍스트 속성은 모든 게 아니라 첫 번째 비트를 반환합니다.

구체적인 질문은 "주어진 선택기의 스타일 시트에서 설정 한 것을 어떻게 찾을 수 있습니까?"입니다.여기에 근접하는 방법 중 하나는 다음과 같습니다

function findProperty(selector) { 
    rules = document.styleSheets[0].cssRules 
    for(i in rules) { 
     if(rules[i].selectorText==selector) return rules[i].cssText; 
    } 
    return false; 
} 

findProperty('#sidebar'); //returns "#sidebar { margin-right: 12px; }"

것은 당신이이 방법에 액세스 할 수있는 CSS 트리가 이미 브라우저에 의해 해석 된 것입니다 (따라서 위의 '대략'). Firefox를 사용 중이라면 mozilla가 방금 스타일을 삭제하기 때문에 -webkit 스타일이 표시되지 않습니다. 다양한 브라우저는 색상을 표시하는 고유 한 방식을 사용하는 경향이 있습니다 (위의 예와 같이 실제 .css 파일의 색상이 #fff 인 경우 JavaScript로 파싱 한 후 , #ffffff 또는 rgb(255, 255, 255)이 될 수 있음) .

위 내용은 브라우저에서 CSS 시트를 다음과 같이 표시합니다. 초기 .css 파일에 어떤 특정 ASCII 문자가 들어 있는지 알고 싶다면 신뢰할 수있는 유일한 방법은 파일 자체 (AFAIK)를 보는 것입니다.

스타일 시트 개체에 대한 참조는 here입니다.

출처

2010-03-07 03:53:42 Inaimathi

흥미로운 질문입니다. Daniel Wachsstock의 사이트에는 jquery 파서가 있습니다. http://bililite.com/blog/2009/01/16/jquery-css-parser/

불행히도 귀하가 찾고있는 것이 아니지만 시도해 볼 가치가 있습니다. 하나 하나를 분석, 당신은 $(selector).parsecss(callback) $ (선택) 또는 그 자손의 모든 및 요소를 검색

전화 jQuery를에

콜백에 객체 (자세한 내용은 아래를) 통과 : 다음 설명은 자신의 사이트에서 가져온 것입니다 기능.

예를 들어 CSS 파일 생성 :

.gallery a { 
    -jquery-lightbox: {overlayBgColor: '#ddd'} 
}

및 클라이언트 측에

$('.gallery a').lightbox({overlayBgColor: '#ddd'});

출처

2010-02-10 16:19:25 mre

CSS 파서/추출기? 스타일 시트를 객체로 변환하는 방법

답변

관련 문제