인터넷정보

[스크립트] css 로 선언한 값을 객체에서 알아오기

알 수 없는 사용자 2008. 2. 4. 11:10
<html>
<head>
<style>
div { padding-top:5px; }
</style>
</head>
<body>
<div id="a"></div>
<script>
var a = document.getElementById("a");
var s = (a.currentStyle) ? a.currentStyle : document.defaultView.getComputedStyle(a, '');
alert(s.paddingTop);
</script>
</body>
</html>

마우스 올린 객체에 적용된 스타일이 무엇인지 볼 수 있는 라이브러리를 만들 수 있겠네요.




<html>
<head>
<style>
.a {
    background-color:red;
}
.b {
    background-color:blue;
}
</style>
<script>
function getStyleFromObj(obj)
{
    return (obj.currentStyle) ? obj.currentStyle : document.defaultView.getComputedStyle(obj, '');
}
</script>
</head>
<body>
<div id="d" class="a">asdf</div>
<div id="v"></div>
<a href="#" onclick="document.getElementById('d').className = 'a'; return false;">a</a>
<a href="#" onclick="document.getElementById('d').className = 'b'; return false;">b</a>
<a href="#" onclick="document.getElementById('v').innerHTML = getStyleFromObj(document.getElementById('d')).backgroundColor; return false;">view</a>
</body>
</html>

출처:PHPSCHOOL 송효진님
반응형