JavaScript를 사용하여 HTML 요소에서 스타일에 액세스 질문: 어떻게 검색할 수 있나요? 특히 스타일이 tag?</p> <p><strong>해결책:</strong></p> <p>계산된 스타일 값을 얻으려면 요소의 계산된 스타일에 액세스해야 합니다. 대부분의 브라우저에서 지원되는 표준 DOM 레벨 2 방법과 IE 관련 element.currentStyle 속성을 사용하는 두 가지 접근 방식이 있습니다.</p> <p><strong>표준 방법(W3C):</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; if (defaultView && defaultView.getComputedStyle) { styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>여기서 속성 이름은 하이픈으로 구분된 형식이어야 합니다(예: "글꼴 크기"). 값은 픽셀 단위로 반환됩니다.</p> <p><strong>IE 메서드:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>if (el.currentStyle) { styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; if (/^\d+(em|pt|%|ex)?$/i.test(value)) { // Convert non-pixel units to pixels ... } }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>IE에서는 속성 이름이 camelCase 형식일 것으로 예상하고 지정된 단위로 값을 반환합니다. 이 방법에는 특정 제한 사항이 있습니다.</p> <p><strong>사용 예:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var element = document.getElementById("box"); var width = getStyle(element, "width"); console.log("Width: " + width);</pre><div class="contentsignin">로그인 후 복사</div></div>
