width 메서드

width 메서드는 요소의 너비를 얻고 변경할 수 있도록 합니다. 중요한 점은 우리가 '계산된 너비' 값을 얻는다는 것입니다 (computed width). css('width') 메서드와 달리, 이 메서드는 단위 없는 값을 반환합니다 (예: 400) 따라서 수학적 계산에 편리합니다. 이 메서드는 CSS 속성 box-sizing의 지정 여부와 관계없이 요소 콘텐츠의 너비를 얻습니다. 이로 인한 불편함을 피하려면 css('width') 사용을 권장합니다. 계산 오류는 사용자가 페이지 크기를 변경하거나, 요소 또는 그 부모 요소가 숨겨져 있는 경우에도 발생할 수 있습니다. 너비 값은 패딩과 테두리 값을 고려하지 않습니다.

문법

요소의 너비를 얻습니다. 경우에 따라 얻은 값이 소수일 수 있습니다:

javascript$(selector).width();

요소의 너비를 변경하려면 - 단순히 숫자를 전달할 수 있습니다 (예: 400), 이 경우 단위는 픽셀이 되며, 또는 단위를 명시한 문자열을 전달할 수 있습니다 (예: '10em'):

javascript$(selector).width(new value);

또한 주어진 함수를 세트의 각 요소에 적용할 수 있습니다. 이때 함수의 첫 번째 매개변수는 세트 내 요소의 인덱스가 되고, 두 번째 매개변수는 특정 요소에 대해 설정된 현재 너비 값이 됩니다. 함수 내의 this 값은 현재 요소를 가리킵니다. 요소의 너비는 함수가 반환하는 값으로 변경됩니다:

javascript$(selector).width(function(index in set, current width value));

예제

div를 클릭할 때 width 메서드를 사용하여 너비를 40px로 변경하고, css를 사용하여 배경을 초록색으로 변경해 봅시다:

html<div id="test"></div>

css#test {
  width: 90px; 
  height: 80px;
  background: red; 
  color: white;
  margin-top: 10px; 
  cursor: pointer;
}

javascript$('#test').one('click', function() {
  $(this).width(40).css({
    cursor: 'auto',
    backgroundColor: 'green'
  });
});

함께 보기