elements_javascript 기술의 CSS 정보를 읽는 JavaScript 코드

예를 들어, 너비 속성 값이 80px인 HTML 요소에 대한 스타일 정보 세트가 계단식으로 배열됩니다. 그런 다음 이 값을 읽기 위해 스크립트를 호출하면 결과는 항상 빈 문자열이지만 실제로는 "80px"을 얻고 싶습니다. 이러한 상황에 대해 David Flanagan은 "The Definitive Guide to JavaScript (Fifth Edition)"라는 책에서 해결책을 제시합니다.

다음은 JavaScript에 대한 번역입니다: The Definitive Guide, 5th Edition Chapter16 Section4
스크립트 계산 스타일

HTML 요소의 스타일 속성은 스타일 HTML 속성과 동일합니다. 스타일 속성 값인 CSS2 속성 객체는 해당 요소에 대한 인라인 스타일 정보만 제공합니다. 여기에는 CSS 캐스케이드 내의 다른 스타일이 포함되지 않습니다. 계단식 배열 내의 스타일을 무시하면서 요소에 할당된 정확한 스타일 설정을 알고 싶을 때가 있습니다. 당신이 원하는 것은 요소의 스타일을 계산하는 것뿐입니다. 불행하게도 계산된 스타일의 이름은 모호합니다. 이는 브라우저가 요소를 표시하기 전에 수행되는 계산과 관련이 있습니다. 모든 스타일은 요소에 적용 가능한지 확인하려고 시도되며 적용 가능한 모든 스타일은 요소 내의 모든 콘텐츠에 병합됩니다. 요소. 임베디드 스타일. 이 집계된 스타일 정보는 브라우저 창에서 요소를 올바르게 렌더링하는 데 사용될 수 있습니다. W3C 표준에서 요소의 계산된 스타일을 결정하는 데 사용되는 API는 창 개체의 getCompulatedStyle() 메서드입니다. 이 메소드의 첫 번째 매개변수는 스타일이 계산될 것으로 예상되는 요소입니다. 두 번째 매개변수는 ":before" 또는 ":after"와 같은 원하는 CSS 의사 객체입니다. 아마도 의사 객체에는 관심이 없을 것입니다. 그러나 Mozilla와 Firefox의 이 메소드 구현에서는 두 번째 매개변수를 무시할 수 없습니다. 그렇지 않으면 두 번째 매개변수로 인해 항상 getCompulatedStyle()이 null을 발생시키는 것을 보게 될 것입니다. getCompulatedStyle()의 반환 값은 로드된 모든 요소 또는 의사 개체의 스타일을 나타내는 CSS2 속성 개체입니다. 포함된 스타일 정보를 제어할 수 있는 CSS2 속성 객체와 달리 getCompulatedStyle()에서 반환된 객체는 읽기 전용입니다. IE는 getCompulatedStyle() 메서드를 지원하지 않지만 더 간단한 대안을 제공합니다. 각 HTML 요소에는 계산된 스타일을 제어하는 ​​currentStyle 속성이 있습니다. IE API의 유일한 단점은 의사 개체 스타일을 쿼리하는 방법을 제공하지 않는다는 것입니다. 계산된 스타일의 예로 다음 크로스 플랫폼 코드를 사용하여 요소가 표시되는 글꼴 스타일을 결정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var p = document.getElementsByTagName("p")[0] // 문서의 첫 번째 단락 가져오기
var typeface = ""; // 서체를 원합니다
if (p.currentStyle) // 먼저 간단한 IE API를 사용해 보세요
typeface = p.currentStyle.fontFamily
else if (window.getCompulatedStyle) // 그렇지 않으면 W3C API를 사용합니다.
typeface = window.getCompulatedStyle(p, null).fontFamily;

계산된 스타일은 빠르지만 항상 원하는 정보를 제공하지는 않습니다. 지금 바로 글꼴 예를 살펴보세요. 글꼴 계열 속성은 플랫폼 전반에 걸쳐 원하는 글꼴 유형을 쉽게 제공하기 위해 쉼표로 구분된 목록을 허용합니다. 계산된 FontFamily 속성을 쿼리하면 요소에 적용된 글꼴 모음 스타일의 값을 쉽게 확인할 수 있습니다. 이는 "arial,helvetica,sans-serif"와 같은 값을 반환할 수 있지만 실제로 어떤 글꼴이 사용되는지는 알려주지 않습니다. 마찬가지로 요소의 위치가 절대적으로 지정되지 않은 경우 계산 스타일의 위쪽 및 왼쪽 속성을 사용하여 해당 위치와 크기를 쿼리하려고 하면 항상 "auto"가 반환됩니다. 이는 완벽하게 합법적인 CSS 값이지만 원하는 것이 아닙니다.