[jQuery] 제이쿼리(jQuery) 클래스 추가하기 - addClass() 함수

 

 

웹 개발 시 CSS 스타일을 추가하거나 제거하고 변경하기 위해서는 클래스(Class) 속성을 선택자로 사용하게 됩니다. 그 이외의 동적인 스크립트와 액션은 Javascript(자바스크립트)의 ID 값을 사용하게 됩니다. jQuery의 .addClass() 함수는 이렇게 CSS 스타일을 추가 및 제거, 변경하기 위한 클래스(Class)의 Name을 추가할 때 사용하는 함수입니다. 물론 CSS 파일에서 Class의 Style이 선언되어야 적용이 가능합니다.

 

jQuery의 .addClass() 함수

제이쿼리(jQuery)에서 사용하는 Class 명을 추가하여 Style을 적용하는 방법 이외에도 직접 Style을 적용이 가능합니다. .attr() 함수나. css() 함수를 사용하는 방법입니다.

 

//.attr() 함수를 사용하여 style 적용 
$('#test').attr('style','color:black'); 

//.css() 함수를 사용하여 css 값을 적용 
$('#test').css('color', 'black');

 

하지만 이러한 경우에는 코드와 스타일이 분리되지 못하는 단점이 생겨서 유지 보수가 힘들고 프로그래밍 코드가 지저분해지거나 알아보기 힘들 수 있습니다. 이러한 문제들로 인하여 Class 에 스타일을 적용하는 게 방법을 사용합니다.

 

//함수 사용법 
.addClass( className );

 

jQuery의 .addClass() 함수를 사용하여 특정 요소에 새로운 Class를 추가할 수 있습니다. 하지만 이미 클래스가 추가되어 있는 경우에는 새로운 Class를 중복되어 추가하지 않습니다.

 

//Style을 설정하여 Class 추가하기 
<style> 
	.backcolor { background-color: #eeeeee; } 
	.backboder { border: 1px solid #666666; } 
</style> 

$( 'h1' ).addClass( 'backcolor' ); //h1에 backcolor Class 추가 
$( 'h2' ).addClass( 'backboder' ); //h2에 backboder Class 추가