순수 JavaScript를 사용하여 HTML 요소에서 스타일 값을 검색하는 방법은 무엇입니까?

JavaScript를 사용하여 HTML 요소에서 스타일 값 검색

HTML 요소의 스타일 속성을 얻는 것은 HTML 요소의 모양을 동적으로 조작하는 데 필수적입니다. 이 기사에서는 외부 라이브러리의 도움 없이 순수 JavaScript를 사용하여 스타일 값을 검색하는 방법에 대해 자세히 설명합니다.

CurrentStyle과 계산된 속성

스타일 값에 액세스하려면, 인라인 스타일(요소의 스타일 속성 내에 정의됨)과 계산된 속성(실제 적용된 속성)을 구별해야 합니다. 스타일).

Internet Explorer는 element.currentStyle 속성을 사용하여 원래 단위로 값을 유지하는 인라인 스타일을 검색합니다.

Mozilla 및 기타 최신 브라우저는 document.defaultView.getCompulatedStyle 메서드를 사용합니다. 계산된 속성을 제공합니다. 이러한 값은 픽셀로 정규화되어 브라우저 전반에 걸쳐 일관된 표현을 제공합니다.

크로스 브라우저 솔루션

다음 함수는 인라인 및 검색을 위한 크로스 브라우저 솔루션을 제공합니다. 계산된 스타일:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // Convert styleProp to compatible notation
  styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
  // Modern browsers: computed properties
  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE: inline properties
    // Convert styleProp to camelCase notation
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // Normalize units 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;
  }
}

예

ID가 "box"인 요소의 인라인 너비 속성을 검색하려면(스타일 태그를 통해 설정):

alert (getStyle(document.getElementById("box"), "width"));

계산된 너비 속성을 검색하려면 다음을 수행합니다. 계단식 또는 상속된 스타일을 고려합니다.

alert (getStyle(document.getElementById("box"), "width"));

제한 사항

이 기능은 색상 값을 완벽하게 처리하지 않습니다. 최신 브라우저는 RGB 표기법으로 색상을 반환하지만 IE는 원래 정의를 유지합니다.

위 내용은 순수 JavaScript를 사용하여 HTML 요소에서 스타일 값을 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!