[JQuery] removeAttr(), attr(), removeClass() 속성제어

 

 

removeAttr() 선택한 요소의 특정 속성 제거
attr( attributeName ) 속성값 추가/제어
removeClass() 클래스의 값삭제
addClass() 클래스의 값추가

 

 

• removeAttr( attributeName )
• $( 'h1' ).removeAttr( 'title' );  // h1요소에서 title속성을 제거한다.

// input 요소의 placeholder 속성을 제거한다.
$( document ).ready( function() {
	$( 'input' ).removeAttr( 'placeholder' );
} );


// id요소가 cardbox인 style 속성을 제거한다.
 $('#cardbox'+idx).removeAttr('style')

 

 

 

• attr( attributeName ) 속성값 추가/제어 

// id요소가 databtn인 disabled속성 값을 false/true 변경
if(data.length > 0) {
    $('#databtn').attr('disabled', false);
} else {
    $('#databtn').attr('disabled', true);
}

// div 요소의 id속성값을 'controll'으로 변경
$( 'div' ).attr( 'id', 'controll' );

// id 요소가 "inputbox"인 placeholder 속성값을 '입력하세요' 변경
$( '#inputbod' ).attr( 'placeholder', '입력하세요' );

// id요소가 data인 value 속성값을 가져온다.
$( '#data' ).attr('value');

// div 요소의 id 속성값을 가져온다
$( 'div' ).attr( 'id );

 

• removeClass() 클래스의 값삭제

// class요소가 pop-layer인 요소의 값 on을 제거한다.
$(".pop-layer").removeClass("on");

$('.diag-start').removeClass('diag-start');
$('.diag-end').removeClass('diag-end');
$('.diag-go').removeClass('diag-go');

// html 요소에 layer-fixed 클래스를 추가한다.
$('html').addClass('layer-fixed');

 

 

• addClass()  클래스명을 추가하여 Style적용 

// id요소가 data인 속성에 style 적용
#( '#data' ).attr( 'style', 'color: black' );

// id요소가 data인 속성에 css값을 적용
$( '#data' ).css('color', 'red' );


// 함수 사용법
// .addClass()함수를 사용하여 특정요소에 새로운 Class를 추가 할 수 있다.
.addClass( className );
<style>
	.backColor { background-color : #eeeeee; };
</style>

$( 'h2' ).addClass('backColor');