외부 라이브러리를 사용하지 않고 JavaScript에서 HTML 요소의 스타일 값을 어떻게 얻을 수 있습니까?

JavaScript에서 HTML 요소의 스타일 값 얻기

크로스 브라우저 호환성

IE는 element.currentStyle 속성을 사용하는 반면 다른 브라우저는 DOM 레벨 2 document.defaultView.getCompulatedStyle(el, null).getPropertyValue(styleProp) 메소드를 구현하십시오. 이러한 차이를 처리하기 위해 크로스 브라우저 기능이 제공됩니다:

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;
  }
}

코드 조각의 사용 예

제공된 코드 조각에서 너비 값을 얻으려면 , 다음을 사용하세요:

var boxWidth = getStyle(document.getElementById("box"), "width");

위 내용은 외부 라이브러리를 사용하지 않고 JavaScript에서 HTML 요소의 스타일 값을 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!