riix · October 29, 2013 06:15
diff --git a/getStyleObjec.html b/getStyleObjec.html
 <!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>
	<!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>