웹 페이지에 정의된 모든 앨리먼트의 배경 이미지를 뽑아올 필요성을 느껴서, 언제나 그렇듯 막무가내로 자바스크립트에 손을 대기 시작했는데요..
처음에는 다음과 같이 했습니다.
element.style.backgroundImage
이랬더니 값이 없다고 나오더군요. 그래서 좀 찾아보니… css같이 외부로 스타일을 지정해 준 경우에는 값을 읽어올 수 없다고 합니다.
그래서 이것도 몰랐냐 바보야 이러면서 computedstyle 이라는게 문득 생각나면서 좀 찾아봤더니 역시 우리의 IE는
element.currentStyle.backgroundImage
이렇게 써야한다고 하더라구요…
그래서 어쩔 수 없이 분기해서 함수처럼 만들어 쓰기로 했습니다. jQuery같은 훌륭한 라이브러리쓰는 사람들은 알 필요 없겠지만; 혹시나 해서 ^_^ 남겨봅니다.
그리고 언제나 그렇듯 제 코드는 무식 그자체 입니다. 보고 욕하지마세요. 조언은 환영합니다 ㅠ_ㅠ
var val;
if (obj.currentStyle) {
val = eval("obj.currentStyle."+sStyle);
} else {
val = eval("window.getComputedStyle(obj,null)."+sStyle);
}
return val;
}
miname 님의 조언으로 코드가 좋아졌습니다!!! 감사합니다!!! ㅎㅎ
무식하면 삼대가 고생해요 ㅠ_ㅠ 아래 코멘트는 miname님의 언급이십니다*_*
아시겠지만, 보안상으로보나 성능면에서 eval is evil이잖아요.^^
property 값을 얻을 때 bracket notation([])을 쓰면 eval 사용을 피할 수 있습니다.
아래처럼요.
function getStyle(el, sStyle) {
var computedStyle;
if (el.currentStyle) {
computedStyle = el.currentStyle;
} else {
computedStyle = window.getComputedStyle(el, null);
}
return computedStyle[sStyle];
}
만약에 위 function이 여러번 반복적으로 실행되는 상황이라면 아래처럼 바꿔서 두 번째부턴 더 빠르게 실행될 수 있도록 할 수 있을 겁니다.
function getStyle(el, sStyle) {
if (el.currentStyle) {
getStyle = function(el, sStyle) {
var computedStyle;
computedStyle = el.currentStyle;
return computedStyle[sStyle];
};
} else {
getStyle = function(el, sStyle) {
var computedStyle;
computedStyle = window.getComputedStyle(el, null);
return computedStyle[sStyle];
};
}
getStyle(el, sStyle);
}
p.s 파젯을 KWCAG2.0 버전으로 조금 바꾸고 있습니다 ㅎㅎ 그중에 하나만들다가 이게 나온것이에요.
아시는분들만 안다는 파젯 사용방법을 아시는 분은 새로운 파젯 개발버전인 http://mydeute.com/was/pajet.js 으로 변경해서 확인 가능합니다 ㅋㅋㅋㅋ
