jQuery 로 CSS 속성을 동적으로 추가, 수정, 삭제하는 방법

jQuery에서 HTML 요소에 css 속성을 동적으로 추가, 수정, 삭제하는 설명 방법을 설명합니다.

css의 style 속성을 직접 쓰려면 css() 메서드를 사용하고 css를 추가하려면 addClass( ) 제거하려면 removeClass( ) 메서드를 사용합니다.

• 직접 쓰기 CSS()
• 추가 addClass( )
• 삭제 removeClass( )

전제

미리 html에서 jQuery를 로드합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

기술 방법

jQuery에서 style 속성을 직접 쓰려면 [css()] 메서드

하나의 style 속성의 경우

$('요소').css('프로퍼티','값');

여러 스타일 속성의 경우

$('요소').css({'프로퍼티':'값','프로퍼티':'값'});

HTML의 요소에 css를 추가, 삭제하려면 [addClass( )] [removeClass( )] 메서드

요소에 클래스 추가

$('요소').addClass('css명');

요소에 대한 클래스 삭제

$('요소').removeClass('css명');

CSS() 메서드에서 style 속성을 추가, 수정, 삭제

• 하나의 css 속성의 경우 예를 들어 HTML 요소에 class "test"가 붙은 요소의 css "color"를 "blue"에 추가, 변경하고 싶은 경우

$('.test').css('color','blue');

이제 css가 추가되고 이미 color로 지정되어 있어도이 설명이 적용됩니다.

• 여러 css 속성의 경우 예를 들어 ID "jedy"가 붙은 요소의 css "color"를 "blue"에, [font-size"를 [20px]에 추가, 변경하고 싶은 경우

$('#jedy').css({'color':'blue','font-size':'20px'});

• css 속성 삭제 예를 들어 class "test"가 붙은 요소의 css "color" 사양을 삭제하려는 경우

$('.test').css('color','');

addClass() 및 removeClass() 메서드에서 CSS 추가, 삭제

• css 추가 예를 들어 ID "jedy"가 붙은 요소에 css "force"를 추가하려는 경우

$('#jedy').addClass('force');

• CSS 삭제

$('#jedy').removeClass('force');

복수 css 프로퍼티를 준비해 두면, 동적으로 변경할 때 등에 편리합니다.