순수 JavaScript를 사용하여 HTML 요소의 CSS 스타일 값을 검색하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Linda Hamilton

풀어 주다： 2025-01-05 07:40:38

원래의

825명이 탐색했습니다.

How to Retrieve an HTML Element's CSS Style Value Using Pure JavaScript?

JavaScript에서 HTML 요소 스타일 값에 액세스

CSS 스타일시트. 예를 들어 다음 HTML 및 CSS 코드를 생각해 보세요.

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

로그인 후 복사

라이브러리 없이 순수 JavaScript만 사용하는 경우 width 속성 값을 어떻게 검색할 수 있나요? 다음 시도는 종종 빈 값을 수신하는 결과를 낳습니다.

alert(document.getElementById("box").style.width);
alert(document.getElementById("box").style.getPropertyValue("width"));

로그인 후 복사

이러한 시도는 요소의 스타일 속성 내에 정의된 인라인 스타일에서만 작동하기 때문에 실패합니다. 계산된 스타일을 검색하려면 다른 접근 방식이 필요합니다.

브라우저 간 호환성

컴퓨팅된 스타일에 액세스하는 것은 브라우저 간의 차이로 인해 어려움을 겪습니다. Internet Explorer는 element.currentStyle 속성을 사용하는 반면 다른 브라우저는 document.defaultView.getCompulatedStyle을 사용하여 DOM 레벨 2 표준을 따릅니다. 또한 IE는 camelCase(예: "maxHeight")를 사용하여 두 개 이상의 단어로 구성된 속성 이름을 다르게 처리합니다. 다른 브라우저에서는 대시로 단어를 구분해야 합니다(예: "max-height").

브라우저 간 기능

이러한 브라우저 간 차이점을 해결하기 위해 다음 기능을 사용하세요. 사용할 수 있습니다:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  if (defaultView &amp;&amp; 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 (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;
  }
}

로그인 후 복사

이 기능은 계산된 스타일에 액세스하고 두 가지를 모두 처리하기 위한 브라우저 간 호환성을 제공합니다. 표준 및 IE 특정 동작. 브라우저마다 다르게 반환되는 색상 등 모든 경우를 처리할 수는 없다는 점 참고하세요.

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