따라서 이를 얻으려면 IE의 currentStyle과 W3C의 getPropertyValue를 사용해야 합니다.
elem.style.attr의 스타일 획득 방법은 먼저 IE 전용이며 이를 나타냅니다. 전역 스타일 시트 및 내부 스타일. 내장 스타일 및 HTML 태그 속성에 지정된 개체 형식 및 스타일을 통해 IE에서 요소의 CSS 속성 값을 얻을 수 있습니다.
다른 표준 브라우저의 경우 W3C도 제공합니다. getPropertyValue 메소드입니다. 먼저 document.defaultView.getCompulatedStyle을 통해 Css 스타일 객체를 가져온 다음 객체의 getPropertyValue를 통해 속성 값을 가져와야 합니다.
위의 두 가지 메소드는 IE입니다. W3C에서는 요소의 Css 속성의 최종 값을 얻는다는 공통점이 있습니다.
한 가지 차이점은 IE의 방법은 Camel Case 이름을 통해 얻는다는 것입니다. Css 속성(예: textAlign)을 사용하는 반면, W3C의 메소드는 Css 요소(예: text-align)의 원래 속성 이름을 통해 얻습니다. 따라서 W3C 메소드를 사용할 경우 간단한 처리를 수행해야 합니다.
이를 기반으로 요소 속성 값을 얻는 메서드를 캡슐화할 수 있습니다. 메서드는 다음과 같습니다.
function attrStyle(elem,attr){
if(elem.attr){
//html에 스타일이 존재하는 경우 , 먼저 가져옵니다
return elem.style[attr];
}else if(elem.currentStyle){
//IE에서 CSS 속성의 최종 스타일을 가져옵니다(CSS 우선순위와 동일)
return elem.currentStyle[attr];
}else if(document.defaultView && document.defaultView.getCompulatedStyle){
// CSS 속성의 최종 스타일을 얻기 위한 W3C 표준 방법(CSS 우선순위와 동일)
//이 방법은 속성의 원래 형식(텍스트 정렬)을 가져오므로
attr=attr.replace(/( [A-Z])/g,'-$1')로 변환해야 합니다. toLowerCase();
//스타일 객체 가져오기 및 속성 값 가져오기
return document.defaultView.getCompulatedStyle(elem,null).getPropertyValue(attr);
}else{
return null;
}
}
Mastering JavaScript 책에서 요소 위치 가져오기 섹션을 기억하세요(6장인지 7장인지는 잊어버렸습니다). 요소 스타일 속성 값. 제가 document.defaultVies.getCompulatedStyle에 대해 처음 알게 된 것은 훌륭한 책입니다. 관심 있는 친구들은 꼭 읽어봐야 합니다.
원본 레시피는 Mr.Think의 블로그(http:)에 게시되어 있습니다. //mrthink.net/js-get-cssproperty/
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
