css : 선택기를 사용하여 규칙 집합을 변경하고 클래스를 전환/스타일 적용

Question

최근 DOM에서 클래스를 전환하는 것이 아니라 CSS 클래스 또는 선택기의 실제 규칙 집합을 변경하여 요소 스타일을 편집하는 방법에 대해 궁금해했습니다. 그래서 그 대신

$('.some').hide() 

또는

$('.some').addClass('hidden') 

같은의 왜 직접 document.styleSheets과 물건과 함께 규칙을 변경하지? 브라우저가 규칙 집합 변경을 기본적으로 처리하도록하기 때문에이 방법이 일반적으로 더 많은 성능을 발휘하지 않을까요?

display: none;과 같이 .some에 스타일을 추가 할 수 있으며 모든 .some 요소를 직접 숨길 수 있습니다. js의 모든 요소를 ​​반복하여 수동으로 숨길 필요는 없습니다 (위의 예와 같이).

규칙 집합을 직접 변경하면 모든 #persons > .item 또는 무엇인가를 숨길 수 있기 때문에 상황에 맞는 클래스 (예 : this ...를 호출 할 가능성이 높습니다.)를 직접 설정하는 것이 좋습니다. 나는 보통 규칙의 두 가지 유형을 필요로하는

나는 여전히 .hidden.left.green처럼 하나의 기능 클래스 대 .calendar.ticket.item 같은 예를 들어 컨트롤 이름처럼, 마음에 문맥에 이름을 지정하는 클래스에 관한 모범 사례를 알지 못한다.

나는 당신이 이것에 대해 어떻게 생각하는지 물어보고 있는데, 스타일 시트 접근법 수정의 이점과 단점과 jquery와 같은 라이브러리가 스타일을 변경하는 것과 어떻게 다른가요?

또한 우수 사례가 무엇이라고 생각합니까? 더 많은 부분을 해킹으로 간주합니까?

기침 자바 스크립트와 document.styleSheets 조작 기침을

Answer 1

해킹으로 인해 다른 구현 및 규칙 선택 API의 부족으로 까다 롭습니다. 현재 스타일 시트에서 규칙을 조작하려면이 과정을 거쳐야합니다.

iterate over document.styleSheets 
    iterate over rules within current styleSheet object 
     if rule matches our class, edit the rule styles 

그런 다음 계단식 문제가 있습니다. 일치하는 규칙의 특정 스타일이 페이지 스타일 시트의 다른 규칙에 의해 무시되지 않는다는 것을 어떻게 알 수 있습니까? 일치하는 첫 번째 규칙을 변경 한 후에도 보석금을 잃어 버리면 설정 한 스타일이 실제로 !important을 붙이지 않는 한 실제로 요소에 적용된다는 것을 확신 할 수 없습니다. 일련의 문제. 당신은 스타일 시트의 규칙을 조작 한해도

브라우저 은 여전히 ​​는 캐스케이드을 적용하여 모든 스타일을 다시 계산해야 —을 할 수있는 같은 일이있다.

그래서 styleSheets을 조작하는 것이 지금은별로 매력적이지 않습니까? 그렇습니다. 교실 전환을 계속 지켜라. 날 믿어. querySelectorAll과 같은 jQuery와 현대 API를 사용하면 충분히 빠르게 만들 수 있으며 브라우저는 여전히 스타일 값을 다시 계산하는 것과 같은 모든 노력을합니다.

Answer 2

이러한 까다로운 질문 :(

하지만 예를 들어 상용구를 가지고가는 경우에, 그것은처럼 사용할 수있는 몇 가지 표준 클래스가 있습니다 뭔가 당신이 경우는 까다로운 도착

/* Hide from both screenreaders and browsers: h5bp.com/u */ 
.hidden { display: none !important; visibility: hidden; } 

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */ 
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: ; position: absolute; width: 1px; } 

/* Hide visually and from screenreaders, but maintain layout */ 
.invisible { visibility: hidden; } 

이며, JS로 인해 숨길 필요가 있다면 JS로만 숨길 수 있습니다. 그러면 JS가 사용 중지 된 경우 작동합니다. JS에 종속되지 않는 경우 HTML로 숨길 수 있습니다.

JS function = JS로 숨기기 (JS 사용하기 또는

Basicly JS 스위칭 전환 JS 대 HTML 클래스

스타일 전환으로 숨기기 클래스)

기본 HTML 숨기기 = 숨기기를 추가하면 그냥 어느 정도 미리 정의 된 클래스의 한계를 사용하여, 당신에게 등 효과를 추가 할 수있는 oppertunity을 제공합니다. 그러나 일부 자원 비교를보고 싶습니다 :)