프로퍼티 설정
CSS 스타일 설정
제이쿼리를 사용하면 선택한 요소의 스타일에 관한 속성값을 손쉽게 받아오거나 설정할 수 있습니다.
.css() 메소드
제이쿼리에서는 .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() 메소드에서는 하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식의 속성 명을 둘 다 사용할 수 있습니다.
예제
$(function() {
$("#fontSize").on("click", function() {
$("p").css("fontSize", "25px"); // 자바스크립트와 제이쿼리 둘 다 사용할 수 있음.
});
$("#backgroundColor").on("click", function() {
$("p").css("background-color", "red"); // 제이쿼리에서만 사용할 수 있음.
});
});
프로퍼티 설정
다음 메소드를 사용하면 특정 프로퍼티의 값을 읽어오거나 설정할 수 있습니다.
1. .attr()
2. .prop()
3. .removeAttr()
4. .removeProp()
.attr() 메소드
.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() 메소드
.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)의 차이점
.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() 메소드를 이용하여 프로퍼티 값을 다루는 방법으로 위와 같은 문제점을 해결했습니다.
예제
$(function() {
$("#check").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)를 제거함. |
