CSS 속성을 얻는 JavaScript 메소드 값 : getComputedStyle 및 CurrentStyle
1. 요소의 인라인 CSS 스타일 (<divy style = "color :#369"> hello </div>)의 경우 ementcle.style.color를 직접 사용하여 CSS 속성의 값을 직접 얻을 수 있습니다.
2. 그러나 외부 정의 된 CSS 스타일을 얻는 것은 불가능합니다. 또한 IE 브라우저에서 사용하는 방법은 다른 표준 브라우저 (Firefox, Chrome, Opera, Safari)와 다릅니다. IE 브라우저는 Element.currentStyle을 사용하고 W3C 표준 브라우저는 GetComputedStyle을 사용하여 얻습니다.
1. 즉, 요소에 외부로 정의 된 CSS 속성 값을 가져옵니다.
현재 스타일 객체는 요소의 스타일 시트를 반환하지만 스타일 객체는 스타일 태그 속성을 통해 요소에 적용되는 내장 스타일 만 반환합니다.
따라서 현재 스타일 객체를 통해 얻은 스타일 값은 스타일 객체를 통해 얻은 스타일 값과 다를 수 있습니다.
예를 들어, 단락의 색상 속성 값이 링크를 통해 링크를 통해 빨간색 (빨간색)으로 설정되면 객체 .currentStyle.color가 올바른 색상을 반환하고 객체 스타일을 반환 할 수 없습니다. 그러나 사용자가 <p style = "color : 'red'">를 지정하면 현재 스타일과 스타일 객체 모두 값을 빨간색으로 반환합니다.
현재 스타일 객체는 스타일 시트의 스타일 우선 순위를 반영합니다. HTML 에서이 순서는 다음과 같습니다.
1) 인라인 스타일
2) 스타일 시트 규칙
3) HTML 태그 속성
4) HTML 태그의 내부 정의
2. W3C는 외부로 정의 된 CSS 속성 값을 얻습니다. window.getComputedStyle (요소, Pseudoelt)
요소 필수, HTML 요소
Pseudoelt는 요소의 의사 급 스타일을 얻으려면 필요합니다.
코드 사본은 다음과 같습니다.
함수 getStyle (노드, 속성) {
if (node.style [property]) {
return node.style [속성];
}
else if (node.currentStyle) {
return node.currentStyle [속성];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle (Node, NULL);
return style.getPropertyValue (속성);
}
널 리턴;
}