티스토리 뷰

[JQUERY]자바스크립트

jQuery 019. css 변경하기 css()

가산동 2018. 10. 6. 14:38

아래는 예제와 실행 화면입니다.

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            var $p01 = $(".p01");
            $p01.css("color","red");
            
            var $p02 = $(".p02");
            $p02.css({color : "blue", fontSize : "20px"});
            
        });
        
    </script>
</head>
    <body>
        <p class="p01">첫번째 p태그</p>
        <p class="p02">두번째 p태그</p>
        <p class="p03">세번째 p태그</p>
    </body>
</html>
cs



jquery 선택자와 css() 함수를 활용해 css를 변경하는 예제입니다. 


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

먼저 HTML 부터 보겠습니다.

21
22
23
24
25
    <body>
        <p class="p01">첫번째 p태그</p>
        <p class="p02">두번째 p태그</p>
        <p class="p03">세번째 p태그</p>
    </body>
cs

라인 22.   body 태그 안에 p태그를 생성합니다. 클래스명은 p01 입니다.

라인 23.   두번째 p태그를 생성합니다. 클래스명은 p02 입니다.

라인 24.   세번째 p태그를 생성합니다. 클래스명은 p03 입니다.


10
11
            var $p01 = $(".p01");
            $p01.css("color","red");
cs

라인 10.   $()의 기능을 단순 선택자쯤으로 생각할 수 있지만 jquery 에서 $()는 함수 호출 입니다.

  변수의 이름에 $를 붙여준것은 이변수 값안에 jquery의 기능이 들어있을 때 통상적으로 사용됩니다.

  $p01 에 class 이름을 p01 로 넣어준 p태그를 담습니다. 

  선택자에 대한 예제는 아래링크를 참조해주세요

  >>[[JQUERY]자바스크립트] - jQuery 018. jquery 선택자 (tag,id,class,name)

라인 11.   css() 는 css("변경할 css", "css값")으로 사용합니다. 

  $p01 의 폰트 색을 red로 변경합니다.


13
14
            var $p02 = $(".p02");
            $p02.css({color : "blue", fontSize : "20px"});
cs

라인 13.   위와 마찬가지로 두번째 태그인 p02 를 $p02 변수에 담아줍니다.

라인 14.   css()는 한번에 여러가지 css를 변경할 수 있습니다.

  css({"변경할 css" : "css값" , "변경할 css" : "css값"}) 이런식으로 ','를 활용해 2가지 이상의 css를 변경할    수 있습니다.



 

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

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

jQuery 021. 비교연산자 >,<,>=,<=,==,!=  (0) 2018.10.06
jQuery 020. 이벤트 on(), 클릭이벤트 click()  (0) 2018.10.06
jQuery 018. jquery 선택자 (tag,id,class,name)  (0) 2018.10.03
jQuery 017. 실수를 문자로 형변환, 반올림 toFixed()  (0) 2018.10.03
jQuery 016. 16진수 숫자를 문자로 형변환 toString(16)  (0) 2018.09.29
댓글