jQuery의 css() 메소드 사용 가이드_jquery

정의 및 사용법

css() 메서드는 일치하는 요소의 스타일 속성을 하나 이상 반환하거나 설정합니다.

CSS 속성값 반환

첫 번째로 일치하는 요소의 CSS 속성 값을 반환합니다.

참고: 단축 CSS 속성(예: "배경" 및 "테두리")은 값을 반환하는 데 사용될 때 지원되지 않습니다.

코드 복사 코드는 다음과 같습니다.

$(선택기).css(이름)

이름이 필요합니다. CSS 속성의 이름을 지정합니다. 이 매개변수에는 모든 CSS 속성이 포함될 수 있습니다. 예를 들어 "색상"입니다.

예
첫 번째 단락의 색상 스타일 속성 값을 가져옵니다.

코드 복사 코드는 다음과 같습니다.

$("p").css("color");

CSS 속성 설정

일치하는 모든 요소에 지정된 CSS 속성을 설정합니다.

코드 복사 코드는 다음과 같습니다.

$(선택기).css(이름,값)

이름이 필요합니다. CSS 속성의 이름을 지정합니다. 이 매개변수에는 "color"와 같은 CSS 속성이 포함될 수 있습니다.

값은 선택사항입니다. CSS 속성의 값을 지정합니다. 이 매개변수에는 "red"와 같은 CSS 속성 값이 포함될 수 있습니다.

빈 문자열 값이 설정된 경우 요소에서 지정된 속성을 제거합니다.

예
모든 단락의 색상을 빨간색으로 설정:

코드 복사 코드는 다음과 같습니다.

$("p").css("color","red");

함수를 사용하여 CSS 속성 설정

일치하는 모든 요소에 스타일 속성 값을 설정합니다.
이 함수는 설정할 속성 값을 반환합니다. 두 개의 매개변수를 허용합니다. index는 객체 컬렉션에 있는 요소의 인덱스 위치이고 value는 원래 속성 값입니다.

코드 복사 코드는 다음과 같습니다.

$(선택기).css(이름,함수(색인,값))

이름이 필요합니다. CSS 속성의 이름을 지정합니다. 이 매개변수에는 "color"와 같은 CSS 속성이 포함될 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수(색인,값)

CSS 속성의 새 값을 반환하는 함수를 지정합니다.
색인 - 선택 사항입니다. 선택기의 인덱스 위치를 승인합니다
이전 값 - 선택 사항입니다. CSS 속성의 현재 값을 허용합니다.

예시 1
모든 단락의 색상을 빨간색으로 설정:

코드 복사 코드는 다음과 같습니다.

$("버튼").click(function(){
$("p").css("color",function(){return "red";});
});

예시 2
div의 너비를 점차적으로 늘립니다.

코드 복사 코드는 다음과 같습니다.

$("div").click(function() {
$(this).css(
"너비", 함수(색인, 값) {return parsFloat(value) * 1.2;}
);
});

여러 CSS 속성/값 쌍 설정

코드 복사 코드는 다음과 같습니다.

$(selector).css({속성:값, 속성:값, ...})

이름/값 쌍 개체를 일치하는 모든 요소의 스타일 속성으로 설정합니다.
이는 일치하는 모든 요소에 많은 수의 스타일 속성을 설정하는 가장 좋은 방법입니다.

{속성:값}
필수의. 스타일 속성으로 설정할 이름/값 쌍 개체를 지정합니다.
이 매개변수에는 여러 CSS 속성 이름/값 쌍이 포함될 수 있습니다. 예를 들어 {"color":"red","font-weight":"bold"}

예

코드 복사 코드는 다음과 같습니다.

$("p").css({
"색상":"흰색",
"배경색":"#98bf21",
"font-family":"Arial",
"글꼴 크기":"20px",
"패딩":"5px"
});

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.