Library/jQuery 스타일 설정(프로퍼티/클래스)
    Dexter_-   2018. 10. 25. 10:34
  • 728x90
    반응형

    스타일 설정(프로퍼티/클래스)




    CSS 설정


    제이쿼리를 사용하면 선택한 요소의 스타일에 관한 속성값을 손쉽게 받아오거나 설정할 수 있다.



    .css( ) 메소드


    제이쿼리에서는 .css( )  메소드를 사용하여 선택한 요소의 CSS 스타일을 간단하게 설정할 수 있다.

    .css( ) 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정한다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Style</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("p").css("fontSize", "25px");                // 모든 <p>요소의 글씨 크기를 25px로 설정함.
                    $("#text").html($("p").css("fontSize"));    // 첫 번째 <p>요소의 글씨 크기를 반환함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.css() 메소드</h1>
        <p>모든 단락의 CSS 스타일을 변경해 보아요!</p>    
        <button>스타일 설정</button>
        <p id="text"></p>
        
    </body>
     
    </html>
    		cs

    실행결과 :

    .css() 메소드

    모든 단락의 CSS 스타일을 변경해 보아요!



    위의 예제에서 사용된 첫 번째 .css( ) 메소드는 선택한 요소의 글씨 크기를 25px로 설정한다.

    하지만 두 번째로 사용된 .css( ) 메소드는 선택한 요소의 글씨 크기 값을 반환해 주는 역할을 한다.


    .css( ) 메소드를 사용하면 선택한 요소의 스타일에 관한 여러 속성값을 한 번에 설정할 수도 있다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Style</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("p").css({
                        fontSize: "25px",            // 모든 <p>요소의 글씨 크기를 25px로 설정함.
                        backgroundColor: "yellow"    // 모든 <p>요소의 배경색을 노란색으로 설정함.
                    });
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.css() 메소드</h1>
        <p>이 단락에 여러 CSS 스타일을 적용해 보아요!</p>
        <button>스타일 설정</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .css() 메소드

    이 단락에 여러 CSS 스타일을 적용해 보아요!



    Tip : 자바스크립트에서는 하이픈(-)으로 연결된 CSS 속성 명을 사용할 때, 하이픈(-)을 제거하고 이름을 camelCase 방식으로 바꿔서 사용해야 한다.


    제이쿼리의 .css( ) 메소드에서는 하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식의 속성 명을 둘 다 사용할 수 있다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Style</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("#fontSize").on("click", function() {
                    $("p").css("fontSize", "25px");        // 자바스크립트와 제이쿼리 둘 다 사용할 수 있음.
                });
                $("#backgroundColor").on("click", function() {
                    $("p").css("background-color", "red");    // 제이쿼리에서만 사용할 수 있음.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.css() 메소드</h1>
        <p>이 단락에 여러 CSS 스타일을 적용해 보아요!</p>
        <button id="fontSize">font-size 변경!</button>
        <button id="backgroundColor">backgroundColor 변경!</button>
        
    </body>
     
    </html>
    		cs

    실행결과 :

    .css() 메소드

    이 단락에 여러 CSS 스타일을 적용해 보아요!




    프로퍼티 설정


    다음 메소드를 사용하면 특정 프로퍼티의 값을 읽어오거나 설정할 수 있다.

    1. .attr( )
    2. .prop( )
    3. removeAttr( )
    4. removeProp( )


    .attr( ) 메소드


    .attr( ) 메소드는 선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정한다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Style</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("#setBtn").on("click", function() {
                    $("#word").attr("title", "즐거운 제이쿼리 수업이에요~")    // id가 "word"인 요소에 title 속성을 설정함.
                        .css("color", "red");                                // 해당 요소의 CSS 스타일을 설정함.
                });
                $("#removeBtn").on("click", function() {
                    $("#word").removeAttr("title")        // 해당 요소에서 title 속성을 제거함.
                        .css("color", "black");
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.attr() 메소드</h1>
        <p>이 <span id="word">단어</span>에 title 속성을 설정해 보아요!</p>
        <p>아래 버튼을 누른 후 단어 위로 마우스를 가져가 보세요!</p>
        <button id="setBtn">속성값 설정</button>
        <button id="removeBtn">속성 제거</button>
        
    </body>
     
    </html>
    		cs

    실행결과 :

    .attr() 메소드

    이 단어에 title 속성을 설정해 보아요!

    아래 버튼을 누른 후 단어 위로 마우스를 가져가 보세요!




    .prop( ) 메소드


    .prop( ) 메소드는 제이쿼리 1.6부터 새롭게 정의된 메소드이다.

    이 메소드는 선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Style</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("#setBtn").on("click", function() {
                    $("input[value='jquery']").prop({    // <input>요소 중에서 value 값이 "jquery"인 요소를 선택한 후
                        checked: true                    // 해당 요소에 checked 프로퍼티를 true 값으로 설정함.
                    });
                });
                $("#removeBtn").on("click", function() {
                    $("input[value='jquery']").removeProp("checked");    // 해당 요소에서 checked 프로퍼티를 삭제함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.prop() 메소드</h1>
        <form>
            <input type="checkbox" name="lecture" value="html" checked> HTML <br>
            <input type="checkbox" name="lecture" value="jquery"> jQuery
        </form>
        <br>
        <button id="setBtn">jQuery에 프로퍼티 값 설정</button>
        <button id="removeBtn">프로퍼티 제거</button>
        
    </body>
     
    </html>
    		cs

    실행결과 :

    .prop() 메소드

    HTML
    jQuery




    속성(attribute)과 프로퍼티(property)의 차이점


    .attr( ) 메소드와 .prop( ) 메소드의 차이점을 알기 위해서는 우린 속성(attribute)과 프로퍼티(property)의 차이점을 알아야 한다.


    속성(attribute)이란 HTML 요소의 추가적인 정보를 가지고 있는 이름과 값의 한 쌍을 의미한다.


    예제

    // 다음의 <input> 요소는 checked라는 속성(attribute)을 가지고 있으며, 그 속성값은 "checked"이다.

    <input id ="check" type="checkbox" name="lecture" checked="checked">


    프로퍼티(property)란 위와 같은 속성을 객체화하였을 때의 HTML DOM 트리 내부에서의 값을 가리킨다.


    예제

    // 위의 예제에서 만약 해당 체크박스가 체크되면 <check>노드의 프로퍼티 값은 "true"가 되는 것이다.


    즉, 속성은 HTML 문서에 존재하고 값이 변하지 않으며, 프로퍼티는 HTML DOM 트리에 존재하고 그 값이 변할 수 있다.


    예를 들어, 사용자가 HTML 문서에 있는 <input>요소를 체크하거나 자바스크립트를 이용해 값을 변경하면, 속성값은 변하지 않지만 프로퍼티의 값은 변하게 되는 것이다.



    .attr( ) 메소드와 .prop( ) 메소드와의 차이점


    제이쿼리 1.6 이전에는 .attr( ) 메소드를 사용할 때 부정확한 동작을 일으키는 몇몇 속성에 대해 해당 프로퍼티 값까지 고려해서 코드를 작성해야만 했다.

    하지만 제이쿼리 1.6부터 .attr( ) 메소드는 속성만을 다루게 하고, 새롭게 제공되는 .prop( ) 메소드를 이용하여 프로퍼티 값을 다루는 방법으로 위와 같은 문제점을 해결하였다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Style</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("#check").change(function() {
                    // checked 속성의 속성값을 반환함.
                    $("#text").html("checked 속성의 속성값 : " + $(this).attr("checked")
                        + "<br>checked 프로퍼티 값 : " + $(this).prop("checked"));    // checked 프로퍼티 값을 반환함.
                }).change();    // 값이 변할 때마다 갱신함.
            });
       </script>
    </head>
     
    <body>
     
        <h1>.attr() 메소드와 .prop() 메소드와의 차이점</h1>
        <input id="check" type="checkbox" name="lecture" checked="checked">
        <label for="check">체크박스를 체크해 보세요!</label>
        <p id="text"></p>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .attr() 메소드와 .prop() 메소드와의 차이점




    CSS 스타일 설정에 관한 메소드


    메소드

    설명

    .css( )

    css( ) 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정함.

    .atte( )

    선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정함.

    .prop( )

    선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정함.

    .removeAttr( )

    선택한 요소에서 지정된 속성(attribute)을 제거함.

    .removeProp( )

    선택한 요소에서 지정된 프로퍼티(property)를 제거함. 



    클래스 설정


    HTML 요소의 class 속성은 여러 개의 class 값을 가질 수 있다.

    제이쿼리는 HTML 요소의 class 속성값을 손쉽게 다루기 위한 여러 메소드를 제공한다.

    이를 통해 class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 할 수 있다.


    1. .addClass( )
    2. .removeClass( )
    3. .toggleClass( )
    4. .hasClass( )


    클래스의 추가 및 제거


    .addClass( ) 메소드로 클래스를 추가하고, removeClass( ) 메소드로 클래스를 손쉽게 제거할 수 있다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Style</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .lined { 
                text-decoration: line-through;
                color: lightgray;
            }
       </style>
        <script>
            $(function() {
                $("#addBtn").on("click", function() {
                    // id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가함.
                    $("#first, #third").addClass("lined");
                });
                $("#removeBtn").on("click", function() {
                    // id가 "first"와 "third"인 요소가 "lined"라는 클래스에 포함되면 해당 클래스를 제거함.
                    $("#first, #third").removeClass("lined");
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>클래스의 추가 및 제거</h1>
        <p id="first">이 단락에 클래스를 추가해 보아요!</p>
        <p>이 단락에는 클래스를 추가하지 않아요!</p>
        <p id="third">이 단락에 클래스를 추가해 보아요!</p>
        <button id="addBtn">클래스 추가</button>
        <button id="removeBtn">클래스 제거</button>
        
    </body>
     
    </html>
    		cs

    실행결과 :

    클래스의 추가 및 제거

    이 단락에 클래스를 추가해 보아요!

    이 단락에는 클래스를 추가하지 않아요!

    이 단락에 클래스를 추가해 보아요!



    단순히 클래스만을 추가하는 것이 아니라 클래스에 미리 스타일을 설정하여, 해당 클래스에 속한 모든 요소에 한꺼번에 적용하는 것이다.
    또한, .toggleClass( ) 메소드를 이용하여 클래스의 추가와 제거를 번갈아 시행할 수도 있다.

    다음 예제는 .toggleClass( ) 메소드를 이용하여 위의 예제를 더욱 간결하게 만든 예제이다.

    예제
    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Style</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <style>
            .lined { 
                text-decoration: line-through;
                color: lightgray;
            }
       </style>
        <script>
            $(function() {
                $("button").on("click", function() {
                    // id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가하고, 다시 한 번 클릭하면 제거함.
                    $("#first, #third").toggleClass("lined");
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>클래스의 토글</h1>
        <p id="first">이 단락에 클래스를 추가해 보아요!</p>
        <p>이 단락에는 클래스를 추가하지 않아요!</p>
        <p id="third">이 단락에 클래스를 추가해 보아요!</p>
        <button>클래스 토글</button>
        
    </body>
     
    </html>
    		cs

    실행결과 :

    클래스의 토글

    이 단락에 클래스를 추가해 보아요!

    이 단락에는 클래스를 추가하지 않아요!

    이 단락에 클래스를 추가해 보아요!




    클래스의 확인


    .hasClass( ) 메소드를 이용하여 해당 요소가 특정 클래스에 포함되어 있는지를 확인할 수 있다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Style</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("button").on("click", function() {
                    // id가 "target"인 요소가 "lined"라는 클래스에 포함되면 true를, 포함되지 않으면 false를 반환함.
                    var result = $("#target").hasClass("lined");
                    $("#text").html(result);
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>클래스의 확인</h1>
        <p id="target" class="lined">hasClass() 메소드를 이용하여 해당 요소가 특정 클래스에 포함되어 있는지를 확인할 수 있습니다.</p>
        <button>클래스 확인</button>
        <p id="text"></p>
        
    </body>
     
    </html>
    		cs

    실행결과 :

    클래스의 확인

    hasClass() 메소드를 이용하여 해당 요소가 특정 클래스에 포함되어 있는지를 확인할 수 있습니다.




    클래스 설정에 관한 메소드


    메소드

    설명

    .addClass( )

    선택한 요소에 인수로 전달받은 클래스를 추가함.

    .removeClass( )

    선택한 요소에서 인수로 전달받은 클래스를 제거함.

    .ToggleClass( )

    선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 추가되어 있으면 제거함. 

    .hasClass( )

    인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지를 확인함.






    728x90
    반응형
    저작자표시 비영리 변경금지

    'Library > jQuery' 카테고리의 다른 글

    이펙트 효과(페이드/슬라이드/jQuery.fx 객체/animate)  (0) 2018.10.25
    이벤트 처리  (0) 2018.10.25
    요소의 영역(크기/위치)  (0) 2018.10.24
    필터링 메소드  (0) 2018.10.24
    요소의 탐색  (0) 2018.10.24

    관련글 관련글 더보기

Designed by Tistory.
상단으로

티스토리툴바