jQuery CSS 작업 - css() 메서드
정의와 사용법
css() 메서드는 일치하는 요소의 하나 또는 여러 스타일 속성을 반환하거나 설정합니다.
CSS 속성 값을 반환합니다
첫 번째 일치하는 요소의 CSS 속성 값을 반환합니다.
주석：값을 반환할 때 사용될 경우, 줄임 글자 CSS 속성(예: "background" 및 "border")을 지원하지 않습니다.
$(selector).css(name)
| 매개변수 | 설명 |
|---|---|
| name | 필수입니다. CSS 속성 이름을 정의합니다. 이 매개변수는 모든 CSS 속성을 포함할 수 있습니다. 예를 들어 "color". |
예제
첫 번째 문단의 color 스타일 속성 값을 가져옵니다：
$("p").css("color");
CSS 속성 설정
모든 일치하는 요소의 지정된 CSS 속성을 설정합니다.
$(selector).css(name,value)
| 매개변수 | 설명 |
|---|---|
| name | 必需. CSS 속성의 이름을 정의합니다. 이 매개변수는 어떤 CSS 속성을 포함할 수 있으며, 예를 들어 "color"입니다. |
| value |
선택적. CSS 속성의 값을 정의합니다. 이 매개변수는 어떤 CSS 속성 값을 포함할 수 있으며, 예를 들어 "red"입니다. 공백 문자 값을 설정하면 해당 속성이 요소에서 제거됩니다. |
예제
모든 구절의 색상을 빨간색으로 설정합니다:
$("p").css("color","red");
함수를 사용하여 CSS 속성을 설정합니다
모든 일치하는 요소의 스타일 속성 값을 설정합니다.
이 함수는 설정할 속성 값을 반환합니다. 두 개의 매개변수를 받아들입니다, index는 요소가 객체 집합에서의 인덱스 위치이고, value는 원래의 속성 값입니다.
$(selector).css(name,function(index,value))
| 매개변수 | 설명 |
|---|---|
| name | 必需. CSS 속성의 이름을 정의합니다. 이 매개변수는 어떤 CSS 속성을 포함할 수 있으며, 예를 들어 "color"입니다. |
| function(index,value) |
CSS 속성의 새로운 값을 반환하는 함수를 정의합니다.
|
예제 1
모든 구절의 색상을 빨간색으로 설정합니다:
$("button").click(function(){
$("p").css("color",function(){return "red";});
});
예제 2
div의 너비를 점진적으로 증가시킵니다:
$("div").click(function() {
$(this).css(
"width", function(index, value) {return parseFloat(value) * 1.2;}
);
});
여러 개의 CSS 속성/값을 설정합니다
$(selector).css({property:value, property:value, ...})
이 매개변수를 통해 모든 일치하는 요소의 스타일 속성을 설정합니다.
이는 모든 일치하는 요소에 많은 스타일 속성을 설정하는 최선의 방법입니다.
| 매개변수 | 설명 |
|---|---|
| {property:value} |
必需. 설정할 스타일 속성의 "이름/값" 객체를 정의합니다. 이 매개변수는 여러 개의 CSS 속성 이름/값을 포함할 수 있습니다. 예를 들어 {"color":"red","font-weight":"bold"} |
예제
$("p").css({
"color":"white",
"background-color":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"padding":"5px"
});
