요소와 브라우저의 사이즈, 스크롤, 좌표

345·2023년 7월 17일

브라우저와 자바스크립트

목록 보기

3/8

🧀 스타일과 클래스

자바스크립트에서 요소의 스타일과 클래스를 다룰 수 있습니다.
요소의 style 프로퍼티 객체를 조작하거나, CSS 에서 지정한 스타일을 담은 클래스를
요소에 추가해주는 방법이 있죠.
style 프로퍼티를 다루는 방법은 동적 변경이 필요할 때에 사용하고, 보통은 클래스를 변경하는 방법이 우선됩니다.

자바스크립트를 사용하여 요소의 클래스를 변경하거나 style 프로퍼티를 다루는 방법을 알아봅시다.

className 과 classList

className 과 classList 프로퍼티를 사용하면 요소의 class 속성을 변경할 수 있습니다.

elem.className: 요소의 class 속성의 값을 반환
- 변경하면 클래스 속성값 전체를 바꿔버림
- 클래스 추가 등... 의 조작이 불편

elem.classList: 요소의 class 를 이터러블 객체로 반환
- for..of 사용 가능
- 메서드 종류
  - add/remove("class"): 클래스 추가/제거
  - toggle("class"): class 가 존재하면 제거, 없으면 추가
  - contains("class"): class 가 있다면 true, 없으면 false 반환

className 은 클래스 전체를 변경할 때, classList 는 개별적으로 변경할 때 사용합니다.

요소의 스타일

스타일은 elem.style 로 얻는 style 객체로 변경합니다.
이는 style 속성값에 대응되는 객체로, 프로퍼티에 카멜 표기법을 적용하고 있습니다.
(ex. background-color ➡️ elem.style.backgroundColor)

// 프로퍼티에 값을 할당하여 스타일 지정
document.body.style.backgroundColor = "red";

// 빈 문자열을 할당하여 스타일 제거
document.body.style.backgroundColor = "";

style 객체의 프로퍼티에 값을 할당하면 해당 요소에 스타일이 적용됩니다.
적용된 스타일을 제거하기 위해서는 프로퍼티에 빈 문자열을 할당해줘야 합니다.

❗스타일을 적용할 때, 단위를 정확히 써줘야 합니다.
10px 을 써야하는데 10 을 쓰거나 하면 제대로 동작하지 않습니다.

스타일 얻어오기

style 객체는 요소의 style 속성의 속성값을 읽어오는 것이지, 그 요소에 적용되는 스타일을 읽어오는 게 아닙니다.
즉, CSS 에 body 태그의 스타일을 지정한 것은 document.body.style 로 읽어올 수 없습니다.

이 때 getComputedStyle 을 사용하면 요소에 적용되고 있는 스타일을 읽어올 수 있습니다.

getComputedStyle(element, [pseudo])

반환값: 스타일 정보를 담은 객체 (CSS 의 정보 포함)

let computedStyle = getComputedStyle(document.body);

alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)

요소의 사이즈와 스크롤

자바스크립트는 요소의 너비나 높이 등의 정보를 프로퍼티로 지원합니다.
이 프로퍼티를 이용하여 요소의 위치를 변경하곤 합니다.

<div id="example">
  ...텍스트...
</div>
<style>
  #example {
    width: 300px;
    height: 200px;
    border: 25px solid #E8C48F;
    padding: 20px;
    overflow: auto;
  }
</style>

요소의 사이즈와 좌표를 측정하는 기하 프로퍼티는 위와 같습니다.
width 는 기본적으로 콘텐츠 영역의 너비가 되는데, 스크롤바의 너비가 16px 이라 콘텐츠 영역이 284px 의 너비를 가지게 된 것을 확인할 수 있습니다.
(스크롤바가 차지하는 너비만큼 콘텐츠 영역 너비가 작아졌습니다❗)

offsetLeft, offsetTop: 요소의 가장 가까운 조상 요소 offsetParent 에서 얼마나 떨어져 있는지
offsetWidth, offsetHeight: border 을 포함한 요소 전체의 너비, 높이
clientWidth, clientHeight: border 안쪽 영역의 너비, 높이 (스크롤바 너비는 포함 ❌)
scrollWidth, scrollHeight: 스크롤바에 의해 감춰진 영역을 포함한 너비와 높이

scrollLeft, scrollTop: 스크롤바에 의해 가려진 영역의 너비와 높이
- 쓰기도 가능해서 조작하면 스크롤바의 위치를 바꿀 수 있음

브라우저 창 사이즈와 스크롤

브라우저 창이 차지하는 너비와 높이, 스크롤 영역에 가려진 전체 페이지 너비와 높이, 문서의 너비와 높이 등을 구하는 방법과 자바스크립트로 스크롤바를 조작하는 방법에 대해 알아봅시다.

브라우저 창의 너비와 높이

document.documentElement 는 <html> 태그와 상응하는 요소로 이를 이용하여 브라우저 창의 사이즈를 얻어올 수 있습니다.

document.documentElement.clientWidth: 브라우저 창의 너비
document.documentElement.clientHeight: 브라우저 창의 높이

window 객체의 innerWidth 와 innerHeight 프로퍼티를 사용해도 되지만, 이는
스크롤바가 차지하는 공간도 포함하여 길이를 계산합니다.
대부분은 스크롤바 안쪽 영역 공간 사이즈를 필요로 하므로, clientWidth/clientHeight 를 사용합니다.

문서의 너비와 높이

문서의 전체 높이는 대략적으로는 document.documentElement.scrollHeight 프로퍼티를 통해 얻을 수 있습니다.
그러나 스크롤이 없는 경우 가끔 scrollHeight 가 clientHeight 보다 작아지는 경우가 발생합니다.

정확한 문서의 전체 높이 값을 얻으려면 다음과 같이 각 값 중에서 최댓값을 얻어야 합니다.

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

스크롤

DOM 요소의 현재 스크롤 상태는 scrollLeft 와 scrollTop 프로퍼티로 구할 수 있습니다.

문서의 스크롤 포지션 정보(스크롤이 어느정도 위치인지... 스크롤에 가려진 위쪽, 왼쪽 영역은 얼마나 되는지)는 window 객체의 pageXOffset 과 pageYOffset 프로퍼티를 사용하여 얻을 수 있습니다.

window.pageXOffset: 가로 스크롤바에 가려진 왼쪽 영역의 너비
window.pageYOffset: 세로 스크롤바에 가려진 위쪽 영역의 너비

스크롤 상태 변경하기

❗DOM 이 완전히 만들어지고 나면, 자바스크립트로 스크롤을 움직일 수 있습니다.

일반 DOM 요소의 스크롤 상태는 scrollTop 이나 scrollLeft 프로퍼티로 쉽게 변경할 수 있습니다.
페이지 전체의 스크롤 상태를 변경할 때는, window 객체의 메서드 scrollBy(x, y) 와 scrollTo(pageX, pageY) 를 쓰면 간편합니다.

scrollBy(x, y): 페이지의 스크롤 상태를 현재에서 x, y 만큼 변경
scrollTo(pageX, pageY): 스크롤바의 상태를 pageX 와 pageY 로 변경

scrollBy 는 현재 상태에 그만큼의 값을 더하고, scrollTo 는 scrollLeft 와 scrollTop 을 변경한 것처럼 스크롤바를 넘어온 인수의 좌표로 이동합니다.

elem.scrollIntoView(top): 요소의 위치로 스크롤바 이동

elem.scrollIntoView(top) 을 호출하면 elem 이 보이도록 스크롤바가 이동합니다.
이때 top 이 true 라면 elem 이 창의 맨 위에 보이도록 하고, false 라면 맨 아래에 보이도록 이동합니다.

스크롤 이동 막기

스크롤바의 위치를 고정시켜, 사용자가 스크롤 이동을 할 수 없게 만들고 싶다면
document.body.style.overflow = "hidden" 으로 설정하면 됩니다.

document.body.style.overflow = "" 이렇게 빈 문자열을 할당하면 스크롤바가 다시 나타납니다.

이 방법은 다른 DOM 요소의 스크롤바를 고정시킬 때도 사용할 수 있습니다.
그러나 스크롤바가 사라지는 만큼 콘텐츠 영역의 너비가 넓어지므로 스크롤바가 사라지면 padding 을 주는 등의 조치를 취해야 합니다.

elem.style.overflow = "hidden": 스크롤바 사라지고 스크롤 사용 불가능

좌표

대부분의 자바스크립트 메서드는 창 기준 좌표 체계, 문서 기준 좌표 체계 중 하나를 이용합니다.
창 기준은 현재 우리에게 보이는 화면 영역을 기준으로 측정한 좌표로, clientX/clientY 입니다.
문서 기준은 전체 document 를 기준으로 측정한 좌표로, pageX/pageY 라고 부릅니다. 스크롤바에 의해 가려진 공간을 포함해서 계산한다는 점에서 창 기준과 다릅니다.

두 좌표는 모두 맨 왼쪽 모서리를 시작점으로 하여 측정됩니다.

clientX/clientY: window 를 기준으로 좌표 계산. 보이는 창의 영역
pageX/pageY: 문서를 기준으로 좌표 계산. 아주 길이가 긴 문서라면 스크롤이 넘어간 지점도 산정하여 계산

getBoundingClientRect 로 요소 좌표 얻기

elem.getBoundingClientRect() 메서드로 요소를 감싸는 가장 작은 박스의 창 기준 좌표를 얻을 수 있습니다.

이 메서드는 DOMRect 클래스의 인스턴스를 반환하는데, 요소의 크기와 뷰포트에 대한 상대좌표를 제공합니다.
x, y, width, height, top, bottom, left, right 등의 프로퍼티를 가지며,
각 프로퍼티는 다음과 같은 정보를 담고 있습니다.