.addClass() - 클래스 값을 추가하는 메서드

2019.03.04 19:40

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass()

.addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다.

문법

	
			1

			.addClass( className )

클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다.

	
			1

			$( 'h1' ).addClass( 'abc' );

띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

	
			1

			$( 'h1' ).addClass( 'ab cd ef' );

페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 수도 있습니다.

예제

h1 요소에는 bg 클래스를 추가하여 배경색을 만들고, h2 요소는 bg와 bd 클래스를 추가하여 배경색과 테두리를 만듭니다.

	
			1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

			<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      .bg { background-color: #eeeeee; }
      .bd { border: 1px solid #666666; }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'h1' ).addClass( 'bg' );
        $( 'h2' ).addClass( 'bg bd' );
      });
    </script>
  </head>
  <body>
    <h1>Lorem ipsum dolor.</h1>
    <h2>Lorem ipsum dolor.</h2>
  </body>
</html>

		

참고

클래스 값 삭제는 .removeClass()로 합니다.
jQuery / Method / .toggleClass()

[출처] https://www.codingfactory.net/10195

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

jquery-addClass-01.png [File Size:22.4KB/Download:9]

이 게시물을

번호	제목	글쓴이	날짜	조회 수
31	[web개발] [jQuery] Select박스 option 값 선택하기	졸리운_곰	2021.10.20	652
30	[web개발][javascript][JQuery] textarea 값 설정및 값 가져오기	졸리운_곰	2021.10.19	441
29	[javascript][jQuery] 제이쿼리(jQuery) 선택자 - #1	졸리운_곰	2021.09.07	571
28	[HTML5, Javascript, Jquery] Add item from array to list when button is clicked in jQuery	졸리운_곰	2021.06.01	739
27	textarea 태그에 값을 넣고 뺄때 아니면 개행문자 '\n'이 혼란이 온다	졸리운_곰	2019.04.08	692
26	jQuery ready와 load의 차이	졸리운_곰	2019.03.29	733
25	How can I detect if a selector returns null?	졸리운_곰	2019.03.25	454
24	jQuery.isEmptyObject()	졸리운_곰	2019.03.24	793
23	[jQuery]요소를 추가하는 메소드(append, prepend, after, before)	졸리운_곰	2019.03.10	575
22	jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드	졸리운_곰	2019.03.10	592
21	How do you convert a jQuery object into a string?	졸리운_곰	2019.03.10	454
20	JQuery 오브젝트 셀렉트한 select object의 내용 확인	졸리운_곰	2019.03.10	601
19	JQuery Object 선언 : jQuery creating objects [duplicate]	졸리운_곰	2019.03.06	542
18	[제이쿼리] 태그 및 요소 삭제, Remove()	졸리운_곰	2019.03.06	848
17	jQuery .each문(for문) 사용시 break, continue를 하려면?	졸리운_곰	2019.03.06	743
16	jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드	졸리운_곰	2019.03.06	543
15	[jQuery] 선택자에 변수 넣기	졸리운_곰	2019.03.04	642
14	JQuery로 radio 버튼의 값 가져오기 : How to get the value of selected radio button in a group using jQuery	졸리운_곰	2019.01.10	532
13	Ajax replace instead of append 그리고 jquery .append(Html). 에서 class 적용 적용	졸리운_곰	2019.01.07	625
12	[jQuery] Ajax 방법	졸리운_곰	2018.08.03	656

첫 페이지 1 2 끝 페이지

쓰기

태그

HTML jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass()

문법

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다. 어린이용이며, 설치가 필요없는 브라우저 게임입니다. https://s1004games.com

예제

참고

댓글 0

로그인

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com