CSS3 javascript로 수정하기

$('#id').removeClass('removed_class');

$('#id').addClass('added_class');

addclass를 했는데 그 css3 속성들이 제대로 적용되지 않는 경우가 있다. 추가되는 css 속성(변경될 css 속성)들은 그 이전에 적용되지 않았던 속성들이어야 한다. 그렇지 않으면  addclass를 해도 기존의 css 속성들이 addclass된 css 속성들을 덮어씌워 버리기 때문에 제대로 css가 적용되지 않는다.

ex)

#identi{

background-color:white;

}

.class_1{

backgrounc-color:red;

}

identi라는(배경색이 흰색인)element가 있었다고 하자. 중간에 배경색을 red로 바꾸고 싶다고

$('#identi').addClass('class_1')하면 먹히지 않는다. 구글 요소검사를 해보면 class_!을 적용한 후에도 background-color:red;에는 줄이 찍 그어져 있고 backgound-color:white가 남아있는 걸 확인할 수 있다. 

그래서

#identi{

}

.class_1{

backgrounc-color:red;

}

.class_2{

background-color:white;

}

page가 로드되거나 deviceready상태일 때 $('#identi').addClass('class_2')를 한 후에 나중에 

배경색을 바꾸고 싶을 때

$('#identi').removeClass('class_2');

$('#identi').addClass('class_1');라고 해주어야한다.