jQuery 제이쿼리의 CSS 조작방식 Manipulation

[jQuery css() 메소드]

jQuery에는 CSS를 조작할 때 한 가지 매우 중요한 메소드가 있습니다. 바로 css()메소드입니다.

css() 메소드는 세가지 다른 문법을 가지고 있고, 이들은 서로 다른 일을 수행합니다.

- css(name) - CSS 속성값(property value)을 리턴합니다.

- css(name, value) - CSS 속성과 값을 설정합니다.

- css({properties}) - 여러 CSS 속성과 값을 설정합니다.

 

 

[CSS 속성 리턴]

css(name)은 첫 번째 매치되는 엘리먼트의 CSS 속성값을 리턴할 때 사용합니다.

예)

$(this).css("background-color');

{적용예제보기9-1}

 

 

[CSS 속성과 값을 설정하기]

css(name,value)는 매치되는 모든 엘리먼트의 CSS 속성을 설정합니다.

예)

$(“p").css("background-color","yellow");

{적용예제보기9-2}

 

 

[여러 CSS 속성과 값 설정하기]

css({properties})는 선택한 엘리먼트에 대해서 한 개 이상의 CSS 속성/값을 쌍으로 설정합니다.

예)

$(“p").css({"background-color":"yellow", "font-size":"200%"});

{적용예제보기9-3}

 

 

[jQuery height() / width() 메소드]

jQuery에는 사이즈를 조절할 수 있는 두가지 중요한 메소드가 있습니다.

- height()

- width()

 

 

[사이즈 조작 예제]

height() 메소드는 매칭되는 모든 엘리먼트의 높이를 설정합니다.

예)

$(“#div1").height("200px");

{적용예제보기9-4}

width() 메소드는 매칭되는 모든 엘리먼트의 너비를 설정합니다.

예)

$(“#div2").width("300px");

{적요예제보기9-5}

 

 

[jQuery CSS 메소드 정리]

$(selector).css(name) → 처음 매칭되는 엘리먼트의 스타일 속성값을 얻습니다

$(selector).css(name,value) → 일치하는 엘리먼트의 첫 스타일 속성값을 설정합니다.

$(selector).css({properties}) → 매칭되는 엘리먼트의 여러 개의 스타일 속성을 설정합니다.

$(selector).height(value) → 매칭되는 엘리먼트의 높이를 설정합니다.

$(selector).width(value) → 매칭되는 엘리먼트의 너비를 설정합니다.