티스토리 뷰

[JQUERY]자바스크립트

jQuery 031. 클래스 추가 및 제거 addClass(), removeClass()

가산동 2018. 11. 18. 13:33

아래는 예제입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <style>
        #exampleP{
            font-size: 30px;
            cursor: pointer;
        }
        .colorRed{
            color:red;
        }
        .colorBlue{
            color:blue;
        }
    </style>
    
    <script>
        $(function(){       // jquery 시작
            /*
                jquery 클래스 추가 및 제거 
            */
            
            //p클릭이벤트
            $("#exampleP").click(function(){
                //현재 색상 구하기
                var currentClass = $(this).attr("class");
                alert("현재 클래스는 '"+currentClass+"'입니다.");
                
                if(currentClass == 'colorRed'){
                    $(this).removeClass("colorRed");
                    $(this).addClass("colorBlue");  
                }else{
                    $(this).removeClass("colorBlue");
                    $(this).addClass("colorRed");  
                }
            });   
        });
    </script>
    
</head>
    <body>
        <p id="exampleP" class="colorRed">글자색바꾸기</p>
    </body>
</html>
cs

아래는 미리보기 입니다. 아래 글자를 '클릭' 해보세요.


글자색바꾸기




이번 예제는 class 를 스크립트에서 동적으로 추가할 수 있는 addClass() 와 제거 할수 있는 removeClass() 입니다.

예제를 라인별로 보겠습니다.


45
        <p id="exampleP" class="colorRed">글자색바꾸기</p>
cs

먼저 p 태그를 위와 같이 생성합니다.


7
8
9
10
11
12
13
14
15
16
17
18
    <style>
        #exampleP{
            font-size: 30px;
            cursor: pointer;
        }
        .colorRed{
            color:red;
        }
        .colorBlue{
            color:blue;
        }
    </style>
cs

class 를 위와 같이 생성 합니다. colorRed 와 colorBlue class를 활용해서 글자색을 번갈아가며 바꿀겁니다.


26
27
            //p클릭이벤트
            $("#exampleP").click(function(){
cs

라인 27.    위에서 생성한 p태그에 click 이벤트를 설정합니다. click()이벤트 예제는 아래링크를 참조하세요

>>[[JQUERY]자바스크립트] - jQuery 020. 이벤트 on(), 클릭이벤트 click()


28
29
30
                //현재 색상 구하기
                var currentClass = $(this).attr("class");
                alert("현재 클래스는 '"+currentClass+"'입니다.");
cs

라인 29.    변수 currentClass 에 p태그가 가지고있는 class 를 담아줍니다. attr() 함수의 경우는 이후에 다른 예제를                통해 알아보겠습니다.

라인 30.    alert()을 이용해서 currentClass 의 값을 출력합니다.

   alert()의 예제는 아래 링크를 참조하세요

>>[[JQUERY]자바스크립트] - jQuery 002. 알림창 alert()


32
33
34
                if(currentClass == 'colorRed'){
                    $(this).removeClass("colorRed");
                    $(this).addClass("colorBlue");  
cs

라인 32.    if()를 이용해서 currntClass 의 값을 비교합니다. 'colorRed' 클래스가 적용되어 있다면 실행됩니다.

라인 33.    if()의 조건을 충족하면, removeClass() 를 이용해서 colorRed 클래스를 제거해줍니다.

라인 34.    addClass()를 이용해서 'colorBlue' 클래스를 적용시켜 줍니다.


35
36
37
38
                }else{
                    $(this).removeClass("colorBlue");
                    $(this).addClass("colorRed");  
                }
cs

라인 32.    위의 if()문의 조건을 충족하지 못하면 실행됩니다.

라인 33.    removeClass() 를 이용해서 'colorBlue' 클래스를 제거해줍니다.

라인 34.    addClass()를 이용해서 'colorRed' 클래스를 적용시켜 줍니다.


if() 함수의 예제는 아래링크를 참조해주세요.

>>[[JQUERY]자바스크립트] - jQuery 023. 조건문 if()

>>[[JQUERY]자바스크립트] - jQuery 024. 조건문 if() 의 활용

>>[[JQUERY]자바스크립트] - jQuery 025. 조건문 if() ,else if(), else()의 활용 #폰트 사이즈 변경하기


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

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 033. 요소를 숨기기 hide(), 보이기 show()  (0) 2018.11.18
jQuery 032. 조건문 switch()  (0) 2018.11.18
jQuery 030. if() 와 삼항연산자(조건부연산자)  (0) 2018.11.04
jQuery 029. 입력창 prompt()  (0) 2018.11.01
jQuery 028. == 연산과 === 연산의 차이  (0) 2018.10.29
댓글