[ JS ] HTML 요소 margin값 가져오기 = style값 가져오기

 

Window.getComputedStyle()

인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 반환한다.

Window.getPropertyValue()

선택한 CSS 속성의 값을 문자열로 반환한다.

 

  사용예시 - 1  

  window.getComputedStyle(header)    일때  반환값

 

 반환값 중에 원하는 style값을 가져오고 싶을때

 style 선택시 카멜케이스 사용하지않고 케밥케이스 사용

  window.getComputedStyle(header).getPropertyValue('가져오고싶은 css값')  

 

 

  사용예시 - 2  

// in vuejs
// 화면 사이즈 조절시마다 실행되는 listWraps 메서드

mounted() {
    this.listWraps()
    window.addEventListener('resize', this.listWraps)
  },
  methods: {
    listWraps() {
      const tab = document.querySelector('.postlist_tab')
      const marginTop = window.getComputedStyle(tab).getPropertyValue('margin-top')
      document.querySelector('.listWrap').style.minHeight = `calc(100vh - ${marginTop})`
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.listWraps)
  }

 

---

✔️ 참고

developer.mozilla.org/ko/docs/Web/API/Window/getComputedStyle