티스토리 뷰

[JQUERY]자바스크립트

jQuery 025. 조건문 if() ,else if(), else()의 활용 #폰트 사이즈 변경하기

가산동 2018. 10. 16. 00:20

아래는 예제입니다.

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //p tag 의 click 이벤트
            $("p").click(function(){
                //p의 font-size
                var fontSize = $("p").css("font-size")
                
                if(fontSize == "10px"){ 
                    //if 조건 
                    $("p").css("font-size","20px");
                }else if(fontSize == "20px"){ 
                    //else if 조건 
                    $("p").css("font-size","30px");
                }else{ 
                    //else 
                    $("p").css("font-size","10px");
                }
            });
            
        });
    </script>
</head>
    <body>
        <p style="font-size:10px;">클릭 하세요</p>
    </body>
</html>
cs


위 예제를 활용한 실행 화면입니다. 실제로 클릭해보세요. (여러번)


클릭 하세요



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


30
31
32
    <body>
        <p style="font-size:10px;">클릭 하세요</p>
    </body>
cs

먼저 html 입니다 p태그를 생성하고, style 을 이용해 폰트 사이즈를 10으로 설정했습니다.


10
11
            //p tag 의 click 이벤트
            $("p").click(function(){
cs

라인 11.    선택자를 통해 p의 클릭이벤트를 생성합니다. 클릭이벤트 예제는 아래링크를 통해 보실 수 있습니다.

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


12
13
                //p의 font-size
                var fontSize = $("p").css("font-size");
cs

라인 13.    변수 'fontSize' 에 p태그의 폰트사이즈를 저장합니다.

   css()의 함수의 기능으로 css를 변경하는 예제를 이전글에서 했었습니다.

   >>[[JQUERY]자바스크립트] - jQuery 019. css 변경하기 css()


15
16
17
                if(fontSize == "10px"){ 
                    //if 조건 
                    $("p").css("font-size","20px");
cs

라인 15.    if()의 조건은 'fontSize' 가 '10px' 와 같을 때 입니다.

   초기에 10px로 설정을 해줬으니, 클릭시 if()조건에 들어 오게됩니다.

라인 17.    if()조건에 들어에되면 p태그의 폰트사이즈를 '20px' 로 바꿔줍니다.


18
19
20
                }else if(fontSize == "20px"){ 
                    //else if 조건
                    $("p").css("font-size","30px");
cs

라인 18.    else if()의 조건은 'fontSize' 가 '20px' 와 같을 때 입니다.

   if()조건에서 '20px'로 변경했기 때문에 다음 클릭시에는 else if()조건으로 들어오게 됩니다.

라인 20.    else if()에서는 '30px'로 변경합니다.


21
22
23
24
                }else{ 
                    //else 
                    $("p").css("font-size","10px");
                }
cs

라인 21.    else 입니다. else 는 if()와 else if()가 아닐 시 들어오게 됩니다.

라인 24.    else 조건에 들어오게 되면 p태그의 폰트 사이즈를 처음 상태인 '10px'로 변경합니다.


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

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

jQuery 027. 텍스트 값 가져오기 text()  (0) 2018.10.19
jQuery 026. input 의 값 확인하기. val()  (0) 2018.10.17
jQuery 024. 조건문 if() 의 활용  (0) 2018.10.15
jQuery 023. 조건문 if()  (0) 2018.10.07
jQuery 022. 논리 연산자 AND(&&), OR(||)  (0) 2018.10.06
댓글