출처: http://perfdrug.tistory.com/76
자바스크립트나 엘리멘트의 style의 속성을 사용해서 스타일 프로퍼티를 설정하지 않으면 자바스크립트에서 그 스타일 값을 가져올 수 없다. 가져올 수 있는 방밥은 다음과 같은 방법이 있다. getComputedStyel(IE용) 과 currentStyle(파이어폭스용) 을 이용하면 가져 올 수 있다.
예제는 아래와 같다.
예제는 아래와 같다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#div1 {background-color: #ff0 }
</style>
<script type="text/javascript">
document.onclick = changeElement;
function getStyle(obj, jsprop, cssprop) {
if (obj.currentStyle) {
return obj.currentStyle[jsprop];
} else if (window.getComputedStyle) {
return document.defaultView.getComputedStyle(obj, null).getPropertyValue(cssprop);
} else {
return null;
}
}
function changeElement() {
var obj = document.getElementById("div1");
alert(obj.style.backgroundColor);
alert(getStyle(obj, "backgroundColor", "background-color"));
obj.style.backgroundColor = "#ff0000";
alert(getStyle(obj, "backgroundColor", "background-color"));
alert(obj.style.backgroundColor);
}
</script>
</head>
<body>
<div id="div1">
<p>This is a DIV element</p>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#div1 {background-color: #ff0 }
</style>
<script type="text/javascript">
document.onclick = changeElement;
function getStyle(obj, jsprop, cssprop) {
if (obj.currentStyle) {
return obj.currentStyle[jsprop];
} else if (window.getComputedStyle) {
return document.defaultView.getComputedStyle(obj, null).getPropertyValue(cssprop);
} else {
return null;
}
}
function changeElement() {
var obj = document.getElementById("div1");
alert(obj.style.backgroundColor);
alert(getStyle(obj, "backgroundColor", "background-color"));
obj.style.backgroundColor = "#ff0000";
alert(getStyle(obj, "backgroundColor", "background-color"));
alert(obj.style.backgroundColor);
}
</script>
</head>
<body>
<div id="div1">
<p>This is a DIV element</p>
</div>
</body>
</html>
