HTML 요소의 CSS속성과 CSS클래스 제어

HTML 요소의 CSS 속성 제어

---

특정 요소에 적용되어 있는 속성값 조회하기

var foo = $("#bar").css('속성이름');

특정 요소의 적용하기

개별적용

$(".btn").css('속성이름', '값');

일괄적용(json형태 사용)

$("#bar").css({
        속성이름: '값',
        속성이름: '값',
        속성이름: '값'
        ...
    });

css 속성이름에 "-"가 있을 경우 속성이름을 반드시 따옴표 처리해야 함.

HTML 요소의 CSS클래스 제어

---

CSS 클래스 적용여부 검사

var foo = $("#bar").hasClass('클래스이름');      // true, false 리턴

CSS 클래스 적용

$("#bar").addClass('클래스이름 클래스 이름... ');

• 두 개 이상의 클래스를 적용하고자 하는 경우 공백으로 구분

CSS 클래스 삭제

$("#bar").removeClass('클래스이름  클래스이름  ...');

두 개 이상의 클래스를 삭제하고자 하는 경우 공백으로 구분

CSS 클래스 적용/ 삭제 자동 반복

$("#bar").toggleClass('클래스 이름    클래스이름 ....');

두 개 이상의 클래스를 처리하고자 하는 경우 공백으로 구분.                toggle --> on/off

not()

• 복수 요소를 지정하고 있는 jQuery객체 중에서 특정 요소를 제외한 항목들을 지정하는 기능.

this와 함께 사용하는 경우

$(".btn").click(function(){
    // ".btn"중에서 클릭된 요소.
    $(this)
    // '.btn'중에서 클릭되지 않은 나머지 요소(들)
    $(".btn").not(this)
});

jQuery 객체를 사용하여 not()함수 사용

".btn"중에서 id값이 "#hello"인 요소 제외

$(".btn").not ($("#hello"))

".btn"중에서 3번째 요소만 제외

$(".btn").not( $(".btn:nth-child(3)") )        // 1부터 카운트
$(".btn").not( $(".btn:eq(2)") )        // ★ 0부터 카운트

CSS 셀렉터를 사용하여 not() 함수 사용

".btn" 중에서 id값이 "#hello"인 요소 제외

$(".btn").not ( "#hello" )

".btn"중에서 3번재 요소만 제외

$(".btn").not( ".btn:nth-child(3)")         // 1부터 카운트
$(".btn").not( ".btn:eq(2)")         // 0부터 카운트