인라인(즉, 스타일 속성을 통해 추가됨) 스타일 정의 외에도 요소의 CSS 스타일에는 페이지에 포함된 CSS와 외부에서 도입된 CSS라는 두 가지 메서드도 있습니다. 하지만 JS에서는 el.style.xxx를 통해서만 inline 스타일 속성을 얻을 수 있어 상대적으로 제약이 크다. 다행스럽게도 브라우저는 다른 방식으로 정의된 스타일 속성을 얻을 수 있는 다른 방법을 제공합니다. IE에는 currentStyle, FF 및 getCompulatedStyle과 같은 기타 w3c 표준 브라우저가 있습니다.
작업의 용이성을 위해 많은 현재 js-libs가 이를 캡슐화했지만 lib를 도입할 필요가 없는 경우가 많습니다. 요소의 현재 스타일 정의를 얻기 위해 getStyle 함수만 있으면 됩니다. 여러 JS-Lib 코드를 참고한 후 getStyle 함수의 단순화된 버전을 구현하기로 결정했습니다. 이 기능의 목표는 대부분의 요구 사항을 충족하고, 크로스 브라우저를 사용하며, 간결한 코드를 갖고, 뛰어난 성능을 갖는 것입니다. 이러한 요구 사항을 바탕으로 작업을 완료하는 데 한 시간이 걸렸습니다. "JS 논리 연산자 특성, 코드 "컴파일", 함수 즉시 실행 등 여러 가지 팁을 주로 사용했습니다. 나중에 사용할 수 있도록 여기에 작성했습니다. 어떤 친구에게든 도움이 될 수 있습니다. 물론 더 좋을 것입니다.
프로그램 코드
var getStyle=함수(){
var f=document.defaultView;
새로운 함수 반환('el','style',[
"style.indexOf('-')>-1 && (style=style.replace(/-( \w)/g,function(m,a){return a.toUpperCase()}));",
"style=='float' && (스타일='",
f ? 'cssFloat': '스타일플로트',
"');return el.style[스타일] || ",
f ? 'window.getCompulatedStyle(el, null)[스타일]': 'el.currentStyle[스타일]',
' || null;'].join(''));
}();
//사용 예:
var el=document.getElementById('test');
getStyle(el,'line-height');
getStyle(el,'색상');
getStyle(el,'float');
출처: http://www.ajaxbbs.net/post/webFront/JS-Get-Style-Function.html