요소의 CSS 속성 값을 정확하게 얻기 위해 javascript를 구현하는 방법은 무엇입니까? DOM 요소의 CSS 속성을 처리할 때 종종 문제가 발생합니다. CSS 속성 값이 페이지에 정의되어 있지만 가져올 때 비어 있습니다. 이는 스타일 시트 파일이나 인라인 CSS 기본 스타일 정보를 안정적으로 반영할 수 없기 때문입니다. 이 글에서는 특정 요소의 CSS 속성 값을 정확하게 얻는 방법을 소개합니다.
자바스크립트:
예제 소스 코드
[www.downcodes.com] <스크립트 유형="텍스트/자바스크립트">
함수 getStyle(요소, 이름)
{
//이 속성이 style[]에 존재하는 경우 최근에 설정된 것입니다(현재 속성입니다).
if (elem.style[이름])
{
return elem.style[이름];
}
// 그렇지 않으면 IE 메서드를 사용해 보세요.
그렇지 않은 경우(elem.currentStyle)
{
return elem.currentStyle[이름];
}
//또는 W3C 방법(존재하는 경우)
else if (document.defaultView && document.defaultView.getCompulatedStyle)
{
//"textAlign" 대신 전통적인 "text-Align" 스타일 규칙 작성 방법을 사용합니다.
name = name.replace(/([AZ])/g,"-$1");
이름 = 이름.toLowerCase();
//스타일 객체를 가져오고 속성 값을 가져옵니다(존재하는 경우).
var s = document.defaultView.getCompulatedStyle(elem,"");
return s && s.getPropertyValue(name);
//그렇지 않으면 다른 브라우저를 사용하고 있는 것입니다.
}
또 다른
{
null을 반환;
}
}
