addClass 메서드
addClass 메서드는
지정된 CSS 클래스를 요소에 추가합니다.
구문
CSS 클래스 하나:
$(셀렉터).addClass(CSS 클래스 이름);
여러 CSS 클래스 (문자열로):
$(셀렉터).addClass('클래스1 클래스2 클래스3 ...');
여러 CSS 클래스 (배열로):
$(셀렉터).addClass(['클래스1', '클래스2', '클래스3', '...']);
집합 내 각 요소에 함수 적용:
$(셀렉터).addClass(function(집합 내 번호, 요소의 현재 CSS 클래스들));
예제
우리 단락에는 클래스가 전혀 없습니다. 여기에
www 클래스를 추가해 봅시다:
<p id="test">text</p>
$('#test').addClass('www');
HTML 코드는 다음과 같이 될 것입니다:
<p id="test" class="www">text</p>
예제
우리 단락에는 이미 클래스가 있습니다. 여기에
www 클래스를 추가로 추가해 봅시다:
<p id="test" class="eee">text</p>
$('#test').addClass('www');
HTML 코드는 다음과 같이 될 것입니다:
<p id="test" class="eee www">text</p>
예제
우리 단락에는 이미 두 개의 클래스가 있습니다. 여기에
www 클래스를 추가로 추가해 봅시다:
<p id="test" class="eee ggg">text</p>
$('#test').addClass('www');
HTML 코드는 다음과 같이 될 것입니다:
<p id="test" class="eee ggg www">text</p>
예제
우리 단락에는 이미 클래스가 있습니다. 여기에
www 클래스와 ggg 클래스, 이렇게 두 개의 클래스를 추가해 봅시다:
<p id="test" class="eee">text</p>
$('#test').addClass('www ggg');
HTML 코드는 다음과 같이 될 것입니다:
<p id="test" class="eee www ggg">text</p>
함께 보기
-
removeClass,toggleClass,hasClass메서드 -
JavaScript 속성
classlist,
이를 사용하면 순수 JavaScript로 요소의 CSS 클래스를 추가하고 제거할 수 있습니다
