"memory" example

For SO question# 38116306

by Louys Patrice Bessette

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
Here is a string...<br>
Defined in CSS as color=red and size=1em
</div>
<br>
<br>
<button id="modifyStyle">
Change style
</button>
&nbsp;&nbsp;&nbsp;
<button id="retreiveStyle">
Back to onload style
</button>

CSS

.item{
  color:#FF0000;
  font-size:1em;
}

JavaScript

// An object used as "memory"
var Mem={};

// Changes some CSS
$.fn.modified = function () {
	Mem.color = $(this).css("color");	// Store the color in "memory"
	Mem.size = $(this).css("font-size");	// Store the font-size in "memory"
	$(this).css({"color":"#00FF00","font-size":"3em"});
}

// Retreive the originally defined CSS
$.fn.initial = function () {
	$(this).css({"color":Mem.color,"font-size":Mem.size});
}



// Button triggers the modified() function
$("#modifyStyle").click(function(){
	$(".item").modified();
})

// Button triggers the "initial() function
$("#retreiveStyle").click(function(){
	$(".item").initial();
})