getElementById().style을 사용하여 CSS 스타일 속성이 비어 있는 이유

getElementById()를 활용하여 HTML 요소를 검색하고 해당 요소에 액세스할 때 element.style.display를 통한 스타일 속성은 #map {display: block}.

이 동작은 element.style이 HTML 문서 내의 요소에 명시적으로 설정된 인라인 스타일만 반영하기 때문에 발생합니다. 인라인 스타일이 정의되지 않은 경우 element.style은 비어 있습니다.

인라인 스타일과 CSS 규칙을 모두 통합하는 요소의 실제 계산 스타일에 액세스하려면 window.getCompulatedStyle() 메서드를 활용하세요. 이 메소드는 요소에 적용된 전체 스타일을 나타내는 스타일 객체를 제공합니다.

예를 들어 console.log(window.getCompulatedStyle(document.getElementById('test')).display)를 호출하면 "block, " #map {display: block} 규칙을 반영합니다.

CSS를 선호하는 인라인 스타일은 일반적으로 권장되지 않지만 element.style과 element.style의 차이점을 이해하세요. window.getCompulatedStyle()은 JavaScript에서 요소 스타일에 정확하게 액세스하는 데 중요합니다.