Today Yewon Learned

[jQuery] CSS 스타일 및 프로퍼티 설정 본문

javascript/jQuery

[jQuery] CSS 스타일 및 프로퍼티 설정

데브워니 2021. 11. 11. 09:40

프로퍼티 설정 .attr() .prop()

메소드 설명
.attr() 선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정한다.
.prop() 선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다.
.removeAttr() 선택한 요소에서 지정된 속성(attribute)을 제거한다.
.removeProp() 선택한 요소에서 지정된 프로퍼티(property)를 제거한다.

*.attr()과 .prop()

.attr() - element가 가지는 속성값이나 정보(style, src, rowspan)를 조회하거나 제어

.prop() - element가 가지는 실제적인 상태(활성화, 체크, 선택여부 등)을 제어

 

 

CSS 스타일 설정 .css()

메소드 설명
.css() css() 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정한다.

 

스타일 반환

$("p").css("backgroundColor")

 

여러 스타일 한번에 설정

$("p").css({
  "fontSize": "30px",
  "backgroundColor": "yellow"
});

 

 

클래스 설정

메소드 설명
.addClass() 선택된 요소에 인수로 전달받은 클래스를 추가한다.
.removeClass() 선택된 요소에서 인수로 전달받은 클래스를 제거한다.
.toggleClass() 선택된 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 이미 추가되어 있으면 제거한다.
.hasClass() 인수로 전달받은 값이 선택된 요소의 클래스가 존재하는지 여부를 확인한다.

 

[참고] : http://www.devkuma.com/

Comments