요소 width 가져오는 속성과 메서드 (스크롤바 너비)

position이 absoulte인 요소의 위치를 width에 따라 설정하던 중 스크롤바의 생성 여부에 따라 위치가 달라졌습니다.

스크롤바 넓이를 제외한 넓이를 구하기 위해 다양한 width를 가져오는 속성에 대해 알아봤습니다.

 

 

• offsetWidth: offsetWidth는 요소의 전체 너비를 반환하는 속성입니다. 이 너비에는 요소의 가시적인 너비, 안쪽 여백(padding), 테두리(border) 및 수직 스크롤바의 너비가 포함됩니다. offsetWidth는 읽기 전용 속성으로, 픽셀 단위의 정수값을 반환합니다.
  
  
• clientWidth: clientWidth는 요소의 내용 영역의 너비를 반환하는 속성입니다. 내용 영역은 요소의 가시적인 너비와 스크롤바를 제외한 영역입니다. 내용 영역은 안쪽 여백(padding)을 포함합니다. clientWidth는 읽기 전용 속성으로, 픽셀 단위의 정수값을 반환합니다.
  
  
• .css('width'): jQuery의 .css() 메서드를 사용하여 요소의 CSS 너비를 가져올 수 있습니다. 예를 들어, $('#elemId').css('width')는 $('#elemId') 요소의 CSS 너비 값을 반환합니다. 반환된 값은 단위를 포함한 문자열로 반환됩니다. 예를 들어, "200px"와 같은 형태일 수 있습니다.
  
  
• scrollWidth: scrollWidth는 요소의 내용 영역의 전체 너비를 반환하는 속성입니다. 내용 영역은 요소의 실제 너비와 동일하지만, 수평 스크롤바로 인해 가려진 부분도 포함합니다. scrollWidth는 읽기 전용 속성으로, 픽셀 단위의 정수값을 반환합니다.
  
  
• .width(): jQuery의 .width() 메서드는 요소의 가시적인 너비를 가져옵니다. 이 메서드는 요소의 가시적인 너비를 반환하는데, 여기에는 안쪽 여백(padding)과 테두리(border)가 포함됩니다. 반환된 값은 픽셀 단위의 정수값입니다.
  
  
• .innerWidth(): jQuery의 .innerWidth() 메서드는 요소의 내용 영역의 너비를 가져옵니다. 이 메서드는 요소의 내용 영역의 너비를 반환하는데, 여기에는 안쪽 여백(padding)이 포함됩니다. 반환된 값은 픽셀 단위의 정수값입니다.
  
  
• .outerWidth(): jQuery의 .outerWidth() 메서드는 요소의 외부 영역의 너비를 가져옵니다. 이 메서드는 요소의 외부 영역의 너비를 반환하는데, 여기에는 안쪽 여백(padding)과 테두리(border)가 포함됩니다. 반환된 값은 픽셀 단위의 정수값입니다.

 

스크롤바의 너비를 제외하고 가져오는 방법입니다.

var element = $('#elemId')[0];
var elementWidth = element.clientWidth;
var scrollbarWidth = element.offsetWidth - elementWidth;

var finalWidth = elementWidth - scrollbarWidth;
console.log(finalWidth);