jQuery 스타일설정

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 속성 명을 사용할 때, 하이픈(-)을 제거하고 이름을 camelCase 방식으로 바꿔서 사용해야 합니다.

 

제이쿼리의 .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(); // 값이 변할 때마다 갱신함.

 

});

 

클래스 설정

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

 

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

 

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

 

 

 

1. .addClass()

 

2. .removeClass()

 

3. .toggleClass()

 

4. .hasClass()

 

클래스의 추가 및 제거

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

 

예제

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

 

});

 

});

 

단순히 클래스만을 추가하는 것이 아니라 클래스에 미리 스타일을 설정하여, 해당 클래스에 속한 모든 요소에 한꺼번에 적용하는 것입니다.

 

또한, .toggleClass() 메소드를 이용하여 클래스의 추가와 제거를 번갈아 시행할 수도 있습니다.

 

 

 

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

 

예제

$(function() {

 

$("button").on("click", function() {

 

// id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가하고, 다시 한 번 클릭하면 제거함.

 

$("#first, #third").toggleClass("lined");

 

});

 

});

 

클래스의 확인

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

 

예제

$(function() {

 

$("button").on("click", function() {

 

// id가 "target"인 요소가 "lined"라는 클래스에 포함되면 true를, 포함되지 않으면 false를 반환함.

 

var result = $("#target").hasClass("lined");

 

$("#text").html(result);

 

});

 

});