window.getComputedStyle

4개의 section을 나눠 scroll 액션을 하는데 0번째 섹션을 제외한 1,2,3번째 섹션이 화면 최상단에 도달하지 않았는데 96px정도가 미리 다음 section으로 넘어가서 원인을 찾던중에 최상단 nav의 height속성이 적용되어 최상단 height만큼 px값을 빼주기 위해 알아보던 중에 inline style 요소가 아닌 style값을 가져오는 방법으로 window.getComputedStyle() 함수를 알게되어 복습차 정리해보겠습니다.

최신) 위와 같은 해결법으로 nav의 heightpx 만큼 빼주는게 아닌 postion:absolute로 section의 공간에 영향이 안미치도록 수정함😅 그래도 window.getComputedStyle()함수를 알게되어서 언젠가는 도움이 되겠지요…

1. window.getComputedStyle

window.getComputedStyle 함수는 인자로 전달받은 Element 의 모든 CSS 속성값을 담은 객체를 담아옵니다.

1.1 getComputedStyle 사용

let globalNav = window.getComputedStyle(element, pseudoElt)

• element (필수) : Style의 속성값을 얻으려는 element
• pseudoElt (옵션) : 일치시킬 의사요소를 지정하는데, 보통의 element들에 대해선 생략되거나 null 이어야 합니다. 의사요소에 대해선 아래에서 설명하겠습니다.

1.2 getComputedStyle 예시

/* css */
.global-nav {
  height           : 44px;
  width            : 1000px;
  background-color : #0d7377;
  border           : 1px solid #1d1f21;
}

let globalNav = document.querySelector('.global-nav');

let globalNavStyle = window.getComputedStyle(globalNav);

// 만약 global-nav의 height 속성 값을 가져온다고 했을 때
let globalNavHeight = window.getComputedStyle(globalNav.getPropertyValue('height'));
or
let globalNavHeight = window.getComputedStyle(globalNav).height;

위와 같이 사용하면 globalNav에 적용된 모든 속성을 globalNavStyle 변수에 객체로 반환됩니다.

저는 여기서 nav height만큼의 px 을 빼줘야했기 때문에 문자열을 정수형으로 바꾸고 사칙연산을 위해 px 문자열을 replace()아래와 같이 사용해서 빼줬습니다.

let globalNavHeight = Number(window.getComputedStyle(globalNav).height.replace('px', ''))

1.3 pseudoElt 예시

let globalNav = window.getComputedStyle(element, pseudoElt)

.global-nav {
  height           : 44px;
  width            : 1000px;
  background-color : #0d7377;
  border           : 1px solid #1d1f21;
}

.global-nav::after {
  background-color : #03a9f4;
  content          : 'hello';
}

getComputedStyle에서는 의사요소 (::after, ::before, ::marker, ::line-marker.. 등) 에서 스타일 정보를 가져올 수 있습니다.

let globalNav = document.querySelector('.global-nav');

let globalAfterContent = window.getComputedStyle(globalNav,':after').content

위와 같이 사용할 수 있습니다.

---

참고
MDN