자바스크립트 스타일 가져오기
- 퍼블리셔/javascript
- 2014. 6. 10. 06:00
인라인 스타일에 접근하기
html코드가 아래처럼 되어 있다고 가정합니다.
<div id="test_1" style="color:#ff0000">
테스트1
</div>
- 먼저 선택합니다.
// 아이디로 불러온다.
var test1 = document.getElementById("test_1");
// color 값을 읽어온다
alert(test1.style.color);
// rgb(255, 0, 0)
인라인이 아닌 스타일 가져오기
inline 스타일이 아닌 경우 스타일 접근하는 방법은 getComputedStyle()함수를 이용해서 전체스타일을 구한 후, 속성에 접근해야 됩니다.
단, 모든 값은 읽기전용.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>스타일 가져오기</title>
<style>
#test_1 {
font-size:24px;
}
</style>
</head>
<body>
<div id="test_1">테스트1</div>
<script>
window.onload=function(){
var test1 = document.getElementById("test_1");
var style = window.getComputedStyle(test1,null);
alert(style.fontSize);
}
</script>
</body>
</html>
만약 getComputedStyle() 함수를 쓰지않는다면
var test1 = document.getElementById("test_1");
alert(test1.fontSize);
// undefined 출력
getComputedStyle 함수는 IE8이하는 지원하지 않습니다.
위코드에서 IE에서 사용하려면 currentStyle을 사용하면 됩니다.
아래처럼 사용하면 됩니다.
var style = test1.currentStyle;
하지만 하위브라우져까지 지원하는 코드가 있습니다.
하위브라우져까지 지원하려는 코드를 사용하려면 아래의 코드를 추가해줘야 한다.
if (!window.getComputedStyle) {
window.getComputedStyle = function(element) {
return element.currentStyle;
}
}
그래서 자바스크립트 부분의 전체코드는 아래와 같다.
window.onload=function(){
if (!window.getComputedStyle) {
window.getComputedStyle = function(element) {
return element.currentStyle;
}
}
var test1 = document.getElementById("test_1");
var style = window.getComputedStyle(test1,null);
alert(style.fontSize);
}