> 웹 프론트엔드 > CSS 튜토리얼 > JavaScript의 다양한 브라우저에서 HTML 요소에 대한 계산된 스타일 값을 어떻게 검색할 수 있습니까?

JavaScript의 다양한 브라우저에서 HTML 요소에 대한 계산된 스타일 값을 어떻게 검색할 수 있습니까?

Mary-Kate Olsen
풀어 주다: 2024-12-21 12:24:15
원래의
711명이 탐색했습니다.

How Can I Retrieve Computed Style Values for HTML Elements Across Different Browsers in JavaScript?

Javascript에서 HTML 요소 스타일 값 추출

인라인 CSS 또는 스타일 태그를 통해 할당된 스타일 속성을 얻으려면 계산된 스타일을 가져와야 합니다. 요소의 스타일 속성만 사용하는 것이 아닙니다. 여기에는 document.defaultView.getCompulatedStyle 및 element.currentStyle과 같은 브라우저 간 호환 방법을 활용하는 것이 포함됩니다.

크로스 브라우저 호환성

Internet Explorer는 element.currentStyle을 사용하는 반면 다른 브라우저는 표준 document.defaultView.getCompulatedStyle 메소드를 준수합니다. IE에서는 CSS 속성 이름이 camelCase 형식으로 되어 있는 것을 기대하지만 표준 형식에서는 대시를 사용합니다.

IE에서 단위 변환

IE는 크기를 원래 단위로 반환하지만 표준 형식에서는 크기를 원래 단위로 반환합니다. 메서드는 항상 픽셀로 변환됩니다. 제공된 getStyle 함수는 필요한 경우 IE에서 단위를 변환하여 이를 설명합니다.

색상 형식

표준 방법은 색상 값을 RGB 표기법으로 반환하는 반면, IE는 이를 다음과 같이 표시합니다. 한정된. getStyle 함수는 특히 색상 형식의 경우 모든 경우를 완벽하게 처리하지 못할 수 있습니다.

계산된 스타일 검색을 위한 사용자 정의 함수

다음 getStyle 함수는 브라우저 간 접근 방식을 제공합니다. 계산된 스타일 검색:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. 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;
  }
}
로그인 후 복사

위 내용은 JavaScript의 다양한 브라우저에서 HTML 요소에 대한 계산된 스타일 값을 어떻게 검색할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿