jQuery attr prop, 속성 프로퍼티 설정

---

CSS 스타일 설정

.css()

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

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

• 위의 예제에서 사용된 첫 번째 .css() 메서드는 선택한 요소의 글씨 크기를 25px로 설정
• 하지만 두 번째로 사용된 .css() 메서드는 선택한 요소의 글씨 크기 값을 반환해 주는 역할
• .css() 메서드를 사용하면 선택한 요소의 스타일에 관한 여러 속성값을 한 번에 설정

$(function() {
    $("button").on("click", function() {
        $("p").css({
            fontSize: "25px",         // 모든 <p>요소의 글씨 크기를 25px로 설정함.
            backgroundColor: "yellow" // 모든 <p>요소의 배경색을 노란색으로 설정함.
        });
    });
});

• 자바스크립트에서는 하이픈(-)으로 연결된 CSS 속성 명을 사용할 때, 하이픈(-)을 제거하고 이름을 camelCase 방식으로 바꿔서 사용해야 함.
• 제이쿼리의 .css() 메서드에서는 하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식의 속성 명을 둘 다 사용 가능

$(function() {
    $("#fontSize").on("click", function() {
        $("p").css("fontSize", "25px"); // 자바스크립트와 제이쿼리 둘 다 사용할 수 있음.
    });

    $("#backgroundColor").on("click", function() {
        $("p").css("background-color", "red"); // 제이쿼리에서만 사용할 수 있음.
    });
});

프로퍼티 설정

.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)의 차이점

• 속성(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() 메서드를 이용하여 프로퍼티 값을 다루는 방법으로 위와 같은 문제점을 해결

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

Reference

https://www.tcpschool.com/jquery/jq_style_property

코딩교육 티씨피스쿨