라이브러리 없이 JavaScript의 HTML 요소에서 스타일 값 검색 JavaScript를 통해 HTML 요소의 스타일에 액세스할 때 검색에 어려움을 겪을 수 있습니다. 꼬리표. 요소의 속성을 통해 설정된 인라인 스타일과 달리 <style> 태그에는 다른 접근 방식이 필요합니다.</p> <p><style> 태그를 사용하면 다음과 같은 크로스 브라우저 기능을 활용할 수 있습니다.</p> <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 // (hypen separated words eg. 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> <p><strong>사용법:</strong></p> <pre>// Getting width style value var width = getStyle(document.getElementById("box"), "width"); // Getting color style value (may differ between browsers) var color = getStyle(document.getElementById("box"), "color");</pre>
