[jQuery] 스타일 변경하기 | css show hide toggle addClass toggleClass

기초리스트

▶기초 ( 선언하기 $.ready() )
▶ 속성보기 ( attr val checked disabled )
▶ 추가 및 삭제 ( append remove before after text html )
▶ 부모형제요소 찾기 ( parent closest children find prev next filter )
▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass )

---

공부하면서 정리한 내용입니다
참고한 내용은 링크를 확인해주세요

---

🐟 스타일

전체 css 속성에 관여하기 가능

// 값 가져오기
$("#item").css('background-color');

// 값 부여하기
$("#item").css('font-weight','bold');

// 값 객체로 부여하기
$("#item").css(
{
    "width" : 1000,
    "height": 300,
    "opacity" :"0.3"
});

display

$("div").show(); // display: block
$("div").hide(); // display: none

$("div").show(speed, callback);
$("div").hide(speed, callback);

$("div").toggle(); // show() <-> hide()

$("div").toggle(speed, callback);

• speed : 'slow', 'fast', 밀리세컨드
• callback : 완료 후 실행

🐟 Class

<div id="item" class="header"></div>

// 클래스 추가
$('#item').addClass('header');

// 클래스 제거
$('#item').removeClass('header');

// 클래스가 없으면 추가, 있으면 제거
$('#item').toggleClass('header');

// 클래스가 있으면 true, 없으면 false 
$("#item").hasClass('header');

---