메인메뉴 바로가기

HOME으로 가기


Javascript

제이쿼리 | 제이쿼리 총정리(4) - 요소의 속성정보 호출,설정

본문


getter & setter 
.html()해당 요소의 HTML 콘텐츠를 반환하거나 설정한다.   $("#trg")​​.html("설정 태그")​
.text()해당 요소의 텍스트 콘텐츠를 반환하거나 설정한다.  $("#trg")​.text("설정 텍스트")​
.width()선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정한다.  $("img").width(300);
.height()선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정한다.
.attr('속성명')해당 요소의 명시된 속성의 속성값을 반환하거나 설정한다.   ​$("#trg")​​.attr('속성명', '설정 값')​;
.position()선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환한다. 
.val()<form>요소의 값을 반환하거나 설정한다.

 

 

 


요소의 크기
.width()선택한 요소 집합의 첫 번째 요소의 너비를 반환하거나, 선택된 요소의 너비를 인수로 전달받은 값으로 설정한다.
.height()선택한 요소 집합의 첫 번째 요소의 높이를 반환하거나, 선택된 요소의 높이를 인수로 전달받은 값으로 설정한다.
.innerWidth()선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역을 포함한 너비를 반환한다.
.innerHeight()선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역을 포함한 높이를 반환한다.
.outerWidth()선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역과 테두리를 포함한 너비를 반환한다. 또는 인수로 true를 전달받으면 마진 영역까지 포함한 너비를 반환한다.
.outerHeight()선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역과 테두리를 포함한 높이를 반환한다. 또는 인수로 true를 전달받으면 마진 영역까지 포함한 높이를 반환한다.

 

 

< inner와 outer >

메소드반환값
.width()요소의 너비
.height()요소의 높이
.innerWidth()요소의 너비 + 패딩(padding)의 너비
.innerHeight()요소의 크기 + 패딩(padding)의 높이
.outerWidth()요소의 너비 + 패딩의 너비 + 테두리(border)의 크기
.outerHeight()요소의 높이 + 패딩의 높이 + 테두리(border)의 높이
.outerWidth(true)요소의 너비 + 패딩의 너비 + 테두리의 너비 + 마진(margin)의 너비
.outerHeight(true)요소의 높이 + 패딩의 높이 + 테두리의 높이 + 마진(margin)의 높이

aa0c0ac1115b8c38ecb5153824d194a6_1577341

 

 

 

 

 

 


요소의 위치 .offset() .position()
.offset()선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정한다.
.position()선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환한다.

 

 


.offset() 메소드와 .position() 메소드의 차이점
.offset() 메소드HTML 문서(HTML document)를 기준으로 함.
.position() 메소드선택한 요소가 웹 페이지에 위치할 때 기준이 되는 부모 요소를 기준으로 함.

 

 

 

 


요소의 스크롤 위치 .scrollLeft() .scrollTop()
.scrollLeft()선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.
.scrollTop()선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.

$(".box").on('scroll', function(){

    var L = $(this).scrollLeft();

    var T = $(this).scrollTop();

    console.log("left:" + L + ", top" + T);

});

 

 

 

 

 


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

선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다.

(​ jQuery 1.6부터 새롭게 정의된 메소드​

.removeAttr()선택한 요소에서 지정된 속성(attribute)을 제거한다.
.removeProp()선택한 요소에서 지정된 프로퍼티(property)를 제거한다.


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

 

 


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

 


 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기