jQuery 6 - [스타일 설정, 프로퍼티, 클래스 설정]

스타일 설정

코딩의 시작, TCP School

프로퍼티 설정

CSS 스타일 설정

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

.css() 메소드

.css() 메소드를 사용하여 선택한 요소의 CSS 스타을 간단하게 설정 가능

• 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나
• 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정

$(function() {
    $("button").on("click", function() {
        $("p").css("fontSize", "25px"); // 모든 <p> 요소의 글씨 크기를 25px로 설정
        $("#text").html($("p").css("fontSize")); // 첫 번째 <p> 요소의 글씨 크기를 반환

        // .css() 메소드를 사용하면 선택한 요소의 스타일에 관한 여러 속성값을 설정 가능
        $("p").css({
            fontSize: "25px",        // 모든 <p> 요소의 글씨 크기를 25px로 설정
            backgroundColor: "yellow" // 모든 <p> 요소의 배경색을 노란색으로 설정
        });

        // 제이쿼리에서는 하이픈(-)으로 연결된 CSS 속성명과 camelCase 방식 둘 다 사용 가능
        $("p").css("background-color", "red"); // 제이쿼리에서만 사용할 수 있음.
    });
});

프로퍼티 설정

특정 프로퍼티의 값을 읽어오거나 설정 가능

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

.attr()

• 선택한 요소의 지정된 속성(attribute)값을 반환하거나
• 선택한 요소의 지정된 속성을 전달받은 값으로 설정

$(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");
    });
});

.prop()

• 제이쿼리 1.6부터 새롭게 정의된 메소드
• 선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나
• 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정.

$(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 프로퍼티를 제거
    });
});

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

속성

• HTML 요소의 추가적인 정보를 가지고 있는 이름과 값의 한 쌍을 의미

// 다음의 <input> 요소는 checked라는 속성을 가지고 있으며 그 속성값은 "checked"
<input id="check" type="checkbox" name="lecture" checked="checked"/>

프로퍼티

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

// 아래의 체크박스가 체크되면 <check> node의 프로퍼티 값은 "true"가 된다.
<input id="check" type="checkbox" name="lecture" checked="checked"/>

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

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

.attr() 과 .prop()의 차이점

• 제이쿼리 1.6 이전에는 .attr() 를 사용할 때 부정확한 동작을 일으키는 몇몇 속성에 대해 해당 프로퍼티 값까지 고려해서 코드를 작성해야 했다.
• 1.6 이후부터, .attr()는 속성만을 다루게하고, 새롭게 제공되는 .prop() 메소드를 이용하여 프로퍼티 값을 다루는 방법으로 위의 문제점을 해결

$(function() {
    $("#checked").change(function() {
        // checked 속성의 속성값을 반환
        $("#text").html("checked 속성의 속성값 : " + $(this).attr("checked") + 
            "<br> checked 프로퍼티 값: " + $(this).prop("checked"));  checked 프로퍼티 값을 반환
    }).change(); 값이 변할때마다 갱신
}); 

위 예제의 실험해보기

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

---

메소드	설명
.css()	css() 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정함.
.attr()	선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정함.
.prop()	선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정함.
.removeAttr()	선택한 요소에서 지정된 속성(attribute)을 제거함.
.removeProp()	선택한 요소에서 지정된 프로퍼티(property)를 제거함.

---

클래스 설정

클래스 설정

• HTML 요소의 class 속성은 여러 개의 class 값을 가질 수 있다.
• 제이쿼리는 HTML 요소의 class 속성값을 손쉽게 다루기 위한 여러 메소드를 제공
• 이를 통해 class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 가능

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

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

• .addClass()로 클래스를 간단히 추가하고
• .removeClass()로 클래스를 쉽게 제거 가능

$(function() {
    // 클래스에 미리 스타일을 설정하여, 해당 클래스에 속한 모든 요소들을 한꺼번에 적용

    $("#addBtn").on("click", function() {
        // id가 "first"와, "thrid"인 요소에 "lined"라는 클래스를 추가
        $("#first, #third").addClass("lined");
    });

    $("#removeBtn").on("click", function() {
        // id가 "first"와, "thrid"인 요소에 "lined"라는 클래스를 제거
        $("#first, #third").removeClass("lined");
    });

    // .toggleClass() 메소드를 이용하여 클래스의 추가와 제거를 번갈아 시행 가능
    // 즉 위의 두 개의 메소드를 한개의 메소드로 줄일 수 있다.
    $("#tgButton").on("click", function() {
        // id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가하고, 다시 한 번 클릭하면 제거
        $("#first, #thiird").toggleClass("lined");
    });
});

클래스의 확인 (.hassClass())

해당 요소가 특정 클래스에 포함되어 있는지를 확인 가능

$(function() {
    $("button").on("click", function() {
        // id가 "target"인 요소가 "lined"라는 클래스에 포함되면 true를, 포함되지 않으면 false를 반환
        var result = $("#target").hasClass("lined");
        $("#text").html(result);
    });
});

클래스 설정에 관한 메소드

---

메소드	설명
.addClass()	선택한 요소에 인수로 전달받은 클래스를 추가함.
.removeClass()	선택한 요소에서 인수로 전달받은 클래스를 제거함.
.ToggleClass()	선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 추가되어 있으면 제거함.
.hasClass()	인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지를 확인함.

---