브라우저 전체에서 JavaScript의 HTML 요소 스타일 값을 검색하는 방법은 무엇입니까?

JavaScript에서 HTML 요소 스타일 값 검색

아래 그림과 같이 스타일 태그를 통해 정의된 스타일이 있는 요소의 경우:

<style>
#box {
  width: 100px;
}
</style>

<div>
<p>JavaScript를 사용하여 스타일 값을 검색하려면 <strong>element.style</strong> 속성만 사용하면 됩니다. 인라인 또는 JavaScript 정의 스타일만 제공하므로 충분하지 않습니다.</p>
<p><strong>계산된 스타일</strong></p>
<p>요소의 <strong>계산된 스타일</strong>에 액세스해야 합니다. 는 상위 요소에서 상속하고 적용된 CSS 규칙을 고려한 후 적용된 실제 스타일을 나타냅니다. JavaScript에서는 두 가지 방법을 사용하여 계산된 스타일을 얻을 수 있습니다:</p>
<p><strong>1. DOM 표준(기타 브라우저):</strong></p>
<pre class="brush:php;toolbar:false">document.defaultView.getComputedStyle(element, null).getPropertyValue(propertyName);

2. IE 특정:

element.currentStyle[propertyName];

그러나 IE는 camelCase 속성 이름(예: "font-Size")을 사용하고 픽셀이 아닌 단위로 크기를 반환할 수 있지만 표준 방법은 하이픈으로 연결된 속성 이름( 예: "font-size") 항상 픽셀 값을 제공합니다.

크로스 브라우저 해결 방법

크로스 브라우저 호환 방식으로 계산된 스타일을 검색하려면 다음 기능을 사용하세요.

function getStyle(element, property) {
  var value, defaultView = (element.ownerDocument || document).defaultView;
  // Sanitize property name for different browsers
  property = property.replace(/([A-Z])/g, "-").toLowerCase();

  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(element, null).getPropertyValue(property);
  } else if (element.currentStyle) {
    // Convert camelCase property name to hyphenated
    property = property.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });

    value = element.currentStyle[property];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
      return (function(value) {
        var oldLeft = element.style.left, oldRsLeft = element.runtimeStyle.left;
        element.runtimeStyle.left = element.currentStyle.left;
        element.style.left = value || 0;
        value = element.style.pixelLeft + "px";
        element.style.left = oldLeft;
        element.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}