DAY31 - jQuery CSS 속성 제어

은나현·2023년 3월 13일
0

📌 1. 요소의 CSS 속성 제어

📍 1-1. css()

  • HTML태그 요소에 적용된 특정 속성값을 얻기 위해서는 CSS()함수를 사용한다.
    $("요소").css("속성이름");
  • HTML태그 요소에 특정 CSS값을 지정할 경우, attr()함수와 용법이 동일하다.
    let 변수 = $("요소").css("CSS속성이름","값");

📍 1-2. hasClass()

  • HTML태그 요소의 특정 클래스 적용 여부는 hasClass() 메서드의 리턴값(boolean)으로 파악할 수 있다.
    let 변수 = $("요소").hasClass("클래스이름");

📍 1-3. addClass(), removeClass()

  • 요소에 특정 CSS클래스를 적용할 경우, addClass() 를 사용한다.
  • 두 개 이상의 클래스를 한번에 적용할 경우 공백으로 구분
    $("요소").addClass("클래스이름");
  • HTML태그 요소에 적용된 특정 CSS클래스를 제거할 경우 removeClass() 를 사용한다.
    $("요소").removeClass("클래스이름");
  • 두 개 이상의 클래스를 한번에 제거할 때 공백으로 구분

📍 1-4. toggleClass()

  • 어떤 요소에 특정 클래스의 적용과 해제를 반복적으로 처리하는 것을 토글처리라고 한다.
    $("요소").toggleClass("클래스이름");
    • 다음과 동일한 기능
      if($("요소").hasClass("클래스")){
          // class가 적용되어 있을 시
          $("요소").removeClass("클래스")
      } else {
          // class가 미적용되어 있을 시
          $("요소").addClass("클래스")
      }

0개의 댓글