[jQeury] jQuery로 CSS 속성 동적으로 추가, 수정, 삭제하기

jQuery로 CSS 속성 동적추가, 수정, 삭제하기

[요약]

• 기존의 html class에 css style속성 추가, 삭제하기
• class 추가후 style 속성 추가하기
• class 삭제하기

---

jQuery를 이용해서 html 요소에 CSS 속성을 동적으로 추가, 수정, 삭제하는 방법을 알아보자.

1. 기존에 html에서 정의되어 있는 id 또는 클래서의 속성에 css의 style 속성을 직접 추가, 삭제하는 방법과

2. html에 class를 새롭게 추가한 후 style 속성을 추가하는 방법,

3.그리고 class를 삭제하는 방법에 대해서 알아보자.

---

[HTML에서 jQuery 로드]

우선 jQuery를 사용하기 위해서는 HTML의 head에서 jQuery를 로드한다.

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

 

[기존의 HTML class에 style 속성을 추가, 삭제]

하나의 style 속성을 추가, 삭제하는 경우

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

// 속성 추가예시
$('.example).css('color', 'red');

// 속성 삭제예시
$('.example).css('color', '');

 

여러 style 속성을 추가, 삭제하는 경우

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

// 속성 추가예시
$('.example').css({'color':'red', 'border':'1px solid #fff'});

// 속성 삭제예시
$('.example').css({'color':'', 'border':''});

 

[HTML의 기존 요소에 class 를 추가, 삭제]

요소에 클래스 추가

// 형식
$('요소').addClass('추가할class요소명');

// 예시
$('.example').addClass('activate');

 

요소에 클래스 삭제

// 형식
$('요소').removeClass('삭제할class요소명');

// 예시
$('.example).remove('activate');

 

 

 

---