jQuery css() 메서드

jQuery HTML/CSS 메서드

css() 메서드는 선택된 요소의 하나나 여러개의 스타일 속성을 가져오거나 설정합니다。

css() 메서드를 사용하여를 사용할 때를 가져옵니다속성 값을 설정할 때, 그것은의 첫 번째 선택된 요소

의 값을 가져옵니다.css() 메서드를 사용하여속성 값을 설정합니다속성 값을 설정할 때, 그것은속성을 설정하면, 그것은/값 쌍.

또한, jQuery는 동일하게 많은 단어 속성의 CSS와 DOM 형식을 이해할 수 있습니다. 예를 들어, jQuery는 css(" background",-color”）와 css（" backgroundColor”）를 반환하고 올바른 값을 얻습니다.

그러나, 약자 CSS 속성(예: "background", "margin", "border")에 대한 완벽한 지원은 없으며, 다른 브라우저에서는 다른 결과가 발생할 수 있습니다.

문법：

CSS 속성 값을 가져옵니다：

$(selector).css(property)

CSS 속성과 값을 설정합니다：

$(selector).css(property,　value)

여러 CSS 속성과 값을 설정합니다：

$(selector).css({property:value,　property:value,　...})

함수를 사용하여 CSS 속성과 값을 설정합니다

$(selector).css(property,　function(index,　currentValue))

예제

클릭하여 DIV의 배경색을 가져오세요：

$("div").click(function(){
　　$(this).css("background-color");
});

모든段落의 color 속성을 설정합니다：

$("button").click(function(){
　　$("p").css("color",　"blue");
});

여러 CSS 속성과 값을 설정합니다：

$("button").click(function(){
　　$("p").css({
　　　　"color":　"white",
　　　　"font-size":　"1.3em",
　　　　"background-color":　"#4285f4",
　　　　"padding":　"20px"　　
　　});
});

클릭된 DIV의 너비, 높이, 색상 및 배경색을 가져오세요：

$("div").click(function(){
　　let　html　=　["클릭된 div에 다음 스타일이 있습니다:"];
　　let　styleProps　=　$(this).css(["width",　"height",　"color",　"background-color]);
　　$.each(styleProps,　function(prop,　value)　{
　　　　html.push(prop　+　":　"　+　value);
　　});
　　$("#result").html(html.join("<br>"));
});

CSS属性와 값을 함수로 설정:

$("button").click(function(){
　　$("p").css("padding", function(i, val){
　　　　return i　+　25;
　　});
});

버튼을 클릭할 때 모든 문단의 패딩을 증가시킵니다(기능 사용):

$("button").click(function(){
　　$("p").css({
　　　　padding: function(i, val){
　　　　　　return parseFloat(val)　*　1.2;
　　　　}
　　});
});

매개변수 값

jQuery HTML/CSS 메서드