JavaScript에서 HTML 요소의 스타일 값 얻기 라이브러리를 사용하지 않고 태그를 사용하면 인라인 스타일이 아닌 계산된 스타일에 액세스할 수 있습니다.</p> <p><strong>크로스 브라우저 호환성</strong></p> <p>IE는 element.currentStyle 속성을 사용하는 반면 다른 브라우저는 DOM 레벨 2 document.defaultView.getCompulatedStyle(el, null).getPropertyValue(styleProp) 메소드를 구현하십시오. 이러한 차이를 처리하기 위해 크로스 브라우저 기능이 제공됩니다:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; // W3C standard way: if (defaultView && defaultView.getComputedStyle) { // Sanitize property name to CSS notation (e.g., font-Size) styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } else if (el.currentStyle) { // IE // Sanitize property name to camelCase styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; // Convert other units to pixels on IE if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return (function(value) { var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = value || 0; value = el.style.pixelLeft + "px"; el.style.left = oldLeft; el.runtimeStyle.left = oldRsLeft; return value; })(value); } return value; } }</pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>코드 조각의 사용 예</strong></p> <p>제공된 코드 조각에서 너비 값을 얻으려면 , 다음을 사용하세요:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var boxWidth = getStyle(document.getElementById("box"), "width");</pre><div class="contentsignin">로그인 후 복사</div></div>
