riix
10/29/2013 - 6:15 AM

스타일쉬트 조작하기

스타일쉬트 조작하기

getStyleObjec.html
content_copyfile_download
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head>
<style type="text/css">
<!--
#foo {
	padding: 10px;
    background: #fff;
    border: solid 10px #ff0000;
    color: #ff0000;
    font-style: italic;
}
-->
</style>
</head>
<body>
	<button class="replace">Style 변형</button>
	<button class="restore">복구</button>
	<div id="foo">
	   123
	</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
<!-- //
$.fn.getStyleObject = function(){
    var dom = this.get(0);
    var style;
    var returns = {};
    if(window.getComputedStyle){
        var camelize = function(a,b){
            return b.toUpperCase();
        }
        style = window.getComputedStyle(dom, null);
        for(var i = 0, l = style.length; i < l; i++){
            var prop = style[i];
            var camel = prop.replace(/\-([a-z])/, camelize);
            var val = style.getPropertyValue(prop);
            returns[camel] = val;
        }
        return returns;
    }
    if(dom.currentStyle){
        style = dom.currentStyle;
        for(var prop in style){
            returns[prop] = style[prop];
        }
        return returns;
    }
    if(style = dom.style){
        for(var prop in style){
            if(typeof style[prop] != 'function'){
                returns[prop] = style[prop];
            }
        }
        return returns;
    }
    return returns;
}

$(document).ready(function(){
	var style = $("#foo").getStyleObject();
    $("button.replace").click(function(){
    	$("#foo").css({
		    'border' : 'solid 10px #0000ff',
		    'color' : '#0000ff',
		    'font-style' : 'normal'
	    });
    });
    $("button.restore").click(function(){
    	$("#foo").css(style);
    });
});
// -->
</script>
</html>