jQuery로 요소 스타일 재설정

Question

jQuery를 사용하여 요소의 스타일을 재설정하는 방법을 아는 사람이 있습니까? 내가 jQuery를

$("#container").removeClass("container-red").addClass("container-white"); 

innerbox 스타일이 변경되지 않습니다를 사용하여 클래스를 변경할 때 다음

<div id="container" class="container-red"> 
    <div id="innerbox">Some text here</div> 
</div> 

:

.container-red { background-color: #f00; } 
.container-red #innerbox { background-color: #fff; } 
.container-white { background-color: #fff; } 
.container-white #innerbox { background-color: #f00; } 
#innerbox { margin: 20px; } 

그리고이 마크 업 : 예를 들어, 나는 이런 스타일이 그것은 이미 흰색 컨테이너와 빨간색 내부 상자가 아니라 흰색 컨테이너와 흰색 안쪽 상자를 남겨주는 이미 스타일이 지정 되었기 때문에 일치합니다. 따라서, 나는

$("#container").children().resetStyles(); 

같은 것을 할 수 있기를 원하고 컨테이너 아이들의 각각 편집

올바른 스타일로 업데이트가 : 죄송합니다, 당신은 모든 권리, 코드가 잘 작동 않는 것, 내 문제는 단순히 다른 CSS가 내 수업 스타일을 재정의했다는 것입니다.

Answer 1

당신은 내가 그것을 테스트하기 때문에 내가 생각하는 뭔가를 잘못하고있는

나에게 그것은 작동 :

http://jsfiddle.net/VH4du/

나는 크롬, 파이어 폭스와 IE9에 그것을 테스트.

Answer 2

나를 위해 바뀌 었습니다. 예 : here을 참조하십시오.

Answer 3

문제는 jQuery 코드가 아니며 요소가 이미 스타일링 된 것입니다. 알맞고 최신 브라우저는 자동으로 내부 요소에 스타일을 다시 적용합니다.

문제는 ID로 innerbox를 사용하고 있다는 것입니다. id가있는 요소가 하나만 있어야하기 때문에 일부 브라우저의 CSS 엔진이 이상한 우선 순위를 부여하고 일부 CSS 규칙을 무시할 수 있습니다.

대신 innerbox를 CLASS로 변환 해보십시오. 예상 한대로 작동해야합니다.

BTW, 어떤 브라우저가 문제를 드러내고 있습니까?