2009-08-28 6 views
23

클릭하면 특정 CSS 클래스를 숨길 체크 박스를 만들려고하지만이 효과를 특정 클래스를 가져 오는 모든 향후 개체에 적용 할 수도 있습니다.jquery가 문서의 글로벌 CSS 정의를 조작 할 수 있습니까?

예를 들어

: 나는이 div가 있습니다

디바 divB이

내가 체크 박스 클래스 abc의 모든 div의 숨기려는 어떤 클래스가 없습니다

클래스 ABC의입니다, 이것은 사용하여 쉽게 $(".abc").hide(). 문제는 사이트의 다른 부분이 나중에 abc 클래스의 divB를 만든 경우 숨겨지지 않는다는 것입니다. 왜냐하면 jquery 코드는 당시에 divA에만 적용되었을 것이기 때문입니다.

내가하려는 것은 문서의 글로벌 CSS 정의를 조작하는 확인란을 만드는 것입니다. 그래서 사용자가 체크 박스를 클릭하면, 나는 abc 클래스를 숨기도록 바꿀 것이고, 나중에 어떤 클래스도 그 클래스에 조인 할 때 숨겨 질 것이다.

jquery에서 가능한가요?

+0

다음은 좋은 대답과 비슷한 질문입니다 : http://stackoverflow.com/questions/1079237/jquery-equivalent-of-yu-stylesheet-utility – Jourkey

답변

30

.abc 선택기에 insertRuleaddRule (필요한 경우) 방법을 사용하여 새 규칙을 추가 할 수 있습니다. 그것은 그 클래스가 적용될 미래에 영향을 주어야합니다.

var stylesheet = document.styleSheets[0], 
    selector = ".abc", rule = "{color: red}"; 

if (stylesheet.insertRule) { 
    stylesheet.insertRule(selector + rule, stylesheet.cssRules.length); 
} else if (stylesheet.addRule) { 
    stylesheet.addRule(selector, rule, -1); 
} 

이 경우에도 jQuery 플러그인이 있습니다. $.rule();

$('body').toggleClass('hideABC'); 

다음과 같은 CSS 있습니다 : 그래서

body.hideABC div.abc { display:none; } 
body div.abc { display:block; } 

을 내가 아마 당신의 체크 박스를 추가하고 클래스를 제거 형성하는 < 몸 > 요소를함으로써이 문제를 해결할 것 https://github.com/flesler/jquery.rule

+5

답해 주셔서 감사합니다. 비록이 코드가 IE에서만 작동한다는 것을 언급해야 하겠지만. 내 애플 리케이션 greasemonkey 스크립트, 그래서 온라인보고 지출 후, 파이어 폭스에 대한 구문이 있어야합니다 밝혀졌다 : document.styleSheets [0] .insertRule (". abc {display : none;}", 0); –

+4

요즘 jquery.rule은 https://github.com/flesler/jquery.rule에 있습니다. –

+0

현대 Firefox에서는 작동하지 않습니다. 얻을 : "오류 : 작업이 안전하지 않습니다." – caponica

18

에서 사용할 수 페이지의 다른 부분에 <div>이 추가되면 '.abc'클래스가 추가되고 첫 번째 CSS 규칙이 적용되고 숨겨집니다.

+2

내 마음에 이것은 대안보다 훨씬 더 나은 (그리고 특히 간단하다) 접근법이다. 왜 그렇게 소수 득표합니까? 이 접근법에 결함이 있습니까? –

+1

정말 똑똑하고 스타일 시트에 새로운 규칙을 추가하는 것보다 훨씬 신뢰할 수있는 크로스 브라우저가 될 것 같습니다. 나는 그 접근법의 단점을 생각할 수 없다. – daGUY

+1

이제는 간단 해 보이지만 AJAX 폴링에서 렌더링 된 데이터에 프로그래밍 방식으로 클래스를 적용하기 시작하면 작업하기가 훨씬 복잡해집니다. –

관련 문제