JavaScript에서 HTML 요소 스타일 값 검색 JavaScript에서 요소의 인라인 스타일을 얻는 것은 간단합니다. 그러나 태그에는 약간 다른 접근 방식이 필요합니다.</p> <p>계산된 스타일 값을 검색하기 위해 JavaScript는 document.defaultView 개체를 통해 액세스할 수 있는 getCompulatedStyle 메서드를 제공합니다. 이 방법은 브라우저 간 검색을 표준화하고 값을 픽셀 단위로 변환하여 표시합니다. 사용 방법은 다음과 같습니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>let element = document.getElementById("box"); let width = getComputedStyle(element).getPropertyValue("width");</pre><div class="contentsignin">로그인 후 복사</div></div> <p>Internet Explorer와 같은 오래된 브라우저의 경우 다른 접근 방식이 필요합니다. IE는 스타일 속성 이름을 camelCase 형식으로 예상하고 원래 단위로 값을 반환하는 element.currentStyle 속성을 지원합니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>let width = element.currentStyle.width;</pre><div class="contentsignin">로그인 후 복사</div></div> <p>브라우저 간 호환성을 보장하려면 다음과 같은 도우미 함수를 사용할 수 있습니다. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function getStyle(element, styleProp) { let value; if (document.defaultView && document.defaultView.getComputedStyle) { styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase(); value = getComputedStyle(element).getPropertyValue(styleProp); } else if (element.currentStyle) { styleProp = styleProp.replace(/\-(\w)/g, str => str[1].toUpperCase()); value = element.currentStyle[styleProp]; if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return convertPixelValue(value); } else { return value; } } return value; }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 기능은 브라우저 간의 차이점을 처리하여 IE 레거시 속성과 단위 형식을 표준에 맞게 변환합니다. 이 도우미를 사용하면 브라우저 전체에서 일관되게 계산된 스타일 값을 얻을 수 있습니다.</p>
