Javascript & JQuery & CSS

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

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

- css(name) - CSS 속성값(property value)을 리턴합니다.
- css(name, value) - CSS 속성과 값을 설정합니다.
- css({properties}) - 여러 CSS 속성과 값을 설정합니다.

1. css(name) - [CSS 속성 리턴]

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

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

2. css(name,value) - [CSS 속성과 값을 설정하기]

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

//백그라운드 색상처리
$("p").css("background-color","yellow");

//백그라운드 이미지 처리
$(".goodsImg").css("background-image","url('/image/sample.jpg')");
	

3. css({properties}) - [여러 CSS 속성과 값 설정하기]

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

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

[jQuery CSS 메소드 정리]
$(selector).css(name) → 처음 매칭되는 엘리먼트의 스타일 속성값을 얻습니다
$(selector).css(name,value) → 일치하는 엘리먼트의 첫 스타일 속성값을 설정합니다.
$(selector).css({properties}) → 매칭되는 엘리먼트의 여러 개의 스타일 속성을 설정합니다.