공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

addClass(), 클래스 추가하기

serpiko 2013. 10. 13. 22:23

.addClass() 함수는 특정한 클래스를 요소에 추가할 수 있습니다.

 

원문 링크 > http://api.jquery.com/addClass/

 

.addClass( className )

className 특정 조건에 추가할 하나 이상의 클래스 명

 

이 함수가 클래스를 대체하는 함수가 아니라는 것에 유의. 클래스를 추가하는 기능만 가지고있다.

 

하나이상의 클래스추가시 띄어쓰기

$('p').addClass('myClass yourClass');

 

클래스를 삭제할 때는 .removeClass()사용

$('p').removeClass('myClass noClass').addClass('yourClass');

 

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
<script>$("p:last").addClass("selected");</script>

</body>
</html>

 

결과)

Hello

and

Goodbye

 

 

마지막 p 태그에 "selected" 클래스가 추가되어 텍스트의 색이 변함.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
<script>$("p:last").addClass("selected highlight");</script>

</body>
</html>

 

결과)

Hello

and

, Goodbye

 

 

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

.css - 속성제어  (0) 2013.10.13
click - 클릭  (0) 2013.10.13
id, class, style - 속성제어 3가지방법  (0) 2013.10.13
구글 제이쿼리 라이브러리  (0) 2013.10.13
attr(), 속성제어  (0) 2013.10.13
댓글