getCompulatedStyle 및 currentStyle 가져오기 스타일(스타일/클래스)

getCompulatedStyle 및 currentStyle 가져오기 스타일(스타일/클래스)_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:40:01

원래의

1075명이 탐색했습니다.

document.getElementById('element').style.xxx를 사용하여 요소의 스타일 정보를 얻을 수 있다는 것은 누구나 알고 있지만 참조된 외부 스타일 시트의 경우 DOM 요소의 스타일 속성에서만 스타일 규칙을 가져옵니다. class 속성을 통해서는 우리가 원하는 정보를 얻을 수 없습니다.

DOM 표준에는 현재 객체 스타일 규칙 정보를 얻을 수 있는 전역 메소드인 getCompulatedStyle이 있습니다. 예를 들어 객체의 왼쪽 패딩을 얻을 수 있는 getComputeStyle(obj,null).paddingLeft입니다. 하지만 아직 끝나지 않았습니다. 사악한 IE는 자체 구현 메소드인 currentStyle을 지원하지 않습니다. 이는 전역 메소드인 getCompulatedStyle과 달리 obj.currentStyle.paddingLeft와 같은 DOM 요소 속성으로 존재합니다. . IE에서는 개체의 왼쪽 내부 여백을 구합니다.

코드를 복사합니다.

 
return window.getCompulatedStyle ? window.getComputeStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft; 

이런 방식으로 현재 값은 개체의 정보는 IE 및 FF 스타일 정보로 반환될 수 있습니다.

특별 참고 사항: 현재 객체의 색상 정보를 얻으려는 경우 IE는 16진수 '#ffffff'를 반환하는 반면 FF는 rgb(255,255,255)를 반환합니다.

js를 사용하면 스타일 속성을 사용할 수 있습니다. html 태그의 스타일을 가져오지만 인라인이 아닌 스타일은 가져올 수 없습니다. 그렇다면 js를 사용하여 CSS의 비인터라인 스타일을 얻는 방법은 무엇입니까? IE에서는 currentStyle을 사용할 수 있지만 Firefox에서는 getCompulatedStyle을 사용해야 합니다. 다음은 간단한 예입니다.

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

js는 currentStyle과 getCompulatedStyle을 사용하여 CSS 스타일을 가져옵니다

 /본문>