jQuery => CSS 조작

통사론

.css (cssProperty) // 렌더링 된 CSS 속성 값 가져 오기
.css ([cssProperty, ...]) // cssProperties의 배열에서 값 가져 오기
.css (cssProperty, value) // 값 설정
.css ({cssProperty : value, ...}) // 속성 및 값 설정
.css (cssProperty, function) // cssProperty를 콜백 함수에 노출합니다.

비고

렌더링 된 값

응답하는 단위가 사용되면 (예 : "auto" , "%" , "vw" 등), .css() 는 실제 렌더링 된 값을 px 반환합니다

.myElement{ width: 20%; }

var width = $(".myElement").css("width"); // "123px"

속성 및 값 서식 지정

속성 은 표준 CSS 형식을 String으로 사용하거나 camelCase를 사용하여 정의 할 수 있습니다.

"margin-bottom"
marginBottom

값 은 문자열로 표현되어야합니다. 숫자 값은 jQuery에 의해 내부적으로 px 단위로 처리됩니다.

.css(fontSize: "1em")
.css(fontSize: "16px")
.css(fontSize: 16)      // px will be used

jQuery 3에서는 .show() 및 .hide() 사용하지 마십시오.

이 jQuery 블로그 게시물 에 따르면 오버 헤드 및 성능 문제로 인해 더 이상 .show() 또는 .hide() 사용하지 않아야합니다.

스타일 시트에 display: none 설정된 요소가있는 경우 .show() 메서드는 더 이상 해당 요소를 재정의하지 않습니다. 따라서 스타일 시트를 사용하여 기본값 인 display: none 을 설정 한 다음 .show() 를 사용하거나 .slideDown() 과 같은 요소를 표시하는 메서드를 사용하지 마십시오. jQuery 3.0으로 이동하는 가장 중요한 규칙은 다음과 display: none 및 .fadeIn() - 그것을 보이게하십시오. 요소가 기본적으로 숨겨져 있어야하는 경우 가장 좋은 방법은 요소에 "숨김"과 같은 클래스 이름을 추가하고 해당 클래스를 스타일 시트에 display: none 으로 정의하는 것입니다. 그런 다음 jQuery의 .addClass() 및 .removeClass() 메소드를 사용하여 해당 클래스를 추가하거나 제거하여 가시성을 제어 할 수 있습니다. 또는 요소에 .ready() 핸들러를 호출하여 페이지에 표시되기 전에 .hide() 를 호출 할 수 있습니다. 또는 스타일 시트 기본값을 실제로 유지해야하는 경우 .css("display", "block") (또는 적절한 표시 값)를 사용하여 스타일 시트를 재정의 할 수 있습니다.

CSS 속성 설정

하나의 스타일 만 설정 :

$('#target-element').css('color', '#000000');

동시에 여러 스타일 설정 :

$('#target-element').css({
    'color': '#000000',
    'font-size': '12pt',
    'float': 'left',
});

CSS 속성 가져 오기

요소의 CSS 속성을 가져 오려면 .css(propertyName) 메서드를 사용할 수 있습니다.

var color    = $('#element').css('color');
var fontSize = $('#element').css('font-size');

숫자 속성 증가 / 감소

숫자 CSS 속성은 .css() 메소드를 사용하여 += 및 -= 구문을 사용하여 각각 증가 및 감소 할 수 있습니다.

  // Increment using the += syntax
  $("#target-element").css("font-size", "+=10");
  
  // You can also specify the unit to increment by
  $("#target-element").css("width", "+=100pt");
  $("#target-element").css("top", "+=30px");
  $("#target-element").css("left", "+=3em");
  
  // Decrementing is done by using the -= syntax
  $("#target-element").css("height", "-=50pt");

CSS - 게터와 세터

CSS Getter

.css() getter 함수는 다음과 같이 페이지의 모든 DOM 요소에 적용 할 수 있습니다.

// Rendered width in px as a string. ex: `150px`
// Notice the `as a string` designation - if you require a true integer, 
// refer to `$.width()` method
$("body").css("width");

이 줄은 지정된 요소의 계산 된 너비 를 반환합니다. 괄호 안에 입력 한 각 CSS 속성은이 $("selector") DOM 요소에 대한 속성 값을 생성합니다. 존재하지 않는 CSS 특성을 요구하면 응답으로 undefined 않게됩니다.

또한 속성의 배열을 사용하여 CSS getter 를 호출 할 수 있습니다.

$("body").css(["animation","width"]);

이것에 의해, 값을 가지는 모든 속성의 객체가 돌려 주어집니다.

Object {animation: "none 0s ease 0s 1 normal none running", width: "529px"}

CSS 설정 도구

.css() setter 메서드는 페이지의 모든 DOM 요소에도 적용 할 수 있습니다.

$("selector").css("width", 500);

이 문은 $("selector") 의 width 를 500px 로 설정하고 jQuery 객체를 반환하므로 지정된 선택자에 더 많은 메소드를 연결할 수 있습니다.

.css() 설정 .css() CSS 속성 및 값의 Object를 전달하는 데 사용될 수도 있습니다.

$("body").css({"height": "100px", width:100, "padding-top":40, paddingBottom:"2em"});

setter가 만든 모든 변경 사항은 DOM 요소 style 속성에 추가되므로 요소의 스타일에 영향을줍니다 (해당 스타일 속성 값은 이미 스타일의 다른 곳에서 !important 정의되지 않은 경우).

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

jQuery
CSS 조작

수색…

통사론

비고