라이브러리 없이 JavaScript에서 HTML 요소 스타일 값에 액세스 소개: HTML 요소의 스타일 속성을 조작하는 것은 매우 중요합니다. 동적 웹 애플리케이션의 측면. 이 질문은 특히 외부 라이브러리에 의존하지 않고 태그를 사용합니다.</p> <p><strong>스타일 값 검색:</strong></p> <p><style> 태그를 사용하려면 요소의 <strong>계산된 스타일</strong>에 액세스해야 합니다. 이 계산된 스타일은 인라인 스타일로 재정의되거나 상위 요소에서 상속된 경우에도 요소에 적용되는 실제 값을 나타냅니다.</p> <p><strong>크로스 브라우저 접근 방식:</strong></p> <p>가져오기 계산된 스타일은 브라우저 간 사용이 까다로울 수 있습니다. Internet Explorer(IE)에는 자체 메커니즘인 element.currentStyle이 있지만 다른 브라우저는 document.defaultView.getComputeStyle 메서드를 사용합니다.</p> <p><strong>크로스 브라우저 기능:</strong></p> <p>To 이 크로스 브라우저 구현을 단순화하려면 getStyle()이라는 함수를 정의할 수 있습니다.</p> <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); } else 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)) { return convertIEValueToPixels(value); } return value; } }</pre> <p>이 함수 브라우저 간 호환성을 위해 속성 이름을 삭제하고 IE에서 단위 변환을 처리합니다.</p> <p><strong>사용법:</strong></p> <p>특정 스타일 속성을 검색하려면 다음과 함께 getStyle() 함수를 사용하세요. 원하는 속성 이름(예: as:</p> <pre>var width = getStyle(document.getElementById("box"), "width");</pre> <p><strong>제한 사항:</strong></p> <p>getStyle() 함수는 유용한 브라우저 간 접근 방식을 제공합니다. 그러나 특히 색상과 같은 특정 속성을 처리할 때 IE가 계산된 값 대신 정의된 값을 반환할 수 있는 제한 사항이 있습니다. 예를 들어 #ff0000으로 정의된 색상 속성은 getStyle() 호출 시 빨간색을 반환할 수 있습니다.</p>
