javascript 요소 스타일 가져오기 nirvana_javascript 기술

CSS 속성 값을 가져오는 Javascript 메소드: getCompulatedStyle 및 currentStyle

1. 요소의 인라인 CSS 스타일의 경우(

hello

) , element.style.color를 직접 사용하여 CSS 속성의 값을 직접 얻을 수 있습니다.

2. 그러나 외부에서 정의된 CSS 스타일은 이 방법을 사용하여 얻을 수 없으며 IE 및 기타 표준 브라우저(Firefox, Chrome, Opera, Safari)는 다른 방법을 사용합니다. IE 브라우저는 element.currentStyle을 사용하고 W3C 표준 브라우저는 getCompulatedStyle을 사용하여 이를 얻습니다.

1. IE는 요소 외부에 정의된 CSS 속성 값을 가져옵니다. element.currentStyle

currentStyle 개체는 요소의 스타일 시트를 반환하지만 스타일 개체는 스타일 시트만 반환합니다. 스타일 태그 속성을 통해 요소에 적용됩니다.

따라서 currentStyle 객체를 통해 얻은 스타일 값과 style 객체를 통해 얻은 스타일 값이 다를 수 있습니다.

예를 들어 단락의 색상 속성 값이 인라인이 아닌 링크되거나 포함된 스타일시트를 통해 빨간색( red )으로 설정된 경우 .currentStyle.color 개체는 올바른 색상을 반환하지만 개체는 올바른 색상을 반환합니다. style.color는 값을 반환하지 않습니다. 그러나 사용자가

를 지정하면 currentStyle 및 STYLE 개체 모두 빨간색 값을 반환합니다.
currentStyle 개체는 스타일 시트의 스타일 우선순위를 반영합니다. HTML에서 이 순서는 다음과 같습니다.

1) 인라인 스타일

2) 스타일 시트 규칙

3) HTML 태그 속성

4) HTML 태그 내부

의 정의 2. W3C는 다음 요소에 의해 외부적으로 정의된 CSS 속성 값을 가져옵니다.
요소는 필수이고, HTML 요소
pseudoElt는 필수이며, pseudoElt를 가져옵니다. 클래스 스타일

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

function getStyle( 노드, 속성){
if (node.style[속성]) {
return node.style[속성]
}
else if (node.currentStyle) {
return node. currentStyle[property];
}
else if (document.defaultView && document.defaultView.getCompulatedStyle) {
var style = document.defaultView.getComputeStyle(node, null)
return style.getPropertyValue; (속성);
}
null
}