<button onclick="changeFont('default');" title="Default color">D</button>
<button onclick="changeFont('black');" class="black_button" title="Change black color">B</button>
<button onclick="changeFont('yellow');" class="yellow_button" title="Change yellow color">Y</button>
<button onclick="changeFont('zoom');" title="Zoom in">A+</button>
<button onclick="changeFont('zoomout');" title="Zoom out">A-</button>
<script>
function changeFont(style){
if(style == 'black'){
document.cookie = "fontStyle=black";
jquery_var("label, h1, h2, p, header, a, #selectedindividual, #selectedemployer,.panel- heading,#navbar,.headtop,#footer,.colorScheme,.panel-heading,.panel-body,.panel-footer").removeClass("yellow");
jquery_var("label, h1, h2, p, header, a, #selectedindividual, #selectedemployer,.panel-heading,#navbar,.headtop,#footer,.colorScheme,.panel-heading,.panel-body,.panel-footer").addClass("black");
}else if(style == 'zoom'){
curSize= parseInt(jquery_var('.landing-pagebg,.panel-title,.active > a').css('font-size')) + 2;
if(curSize<=20)
jquery_var('.landing-pagebg,.panel').css('font-size', curSize);
}else if(style == 'zoomout'){
curSize= parseInt(jquery_var('.landing-pagebg,.panel-title,.active > a').css('font-size')) - 2;
if(curSize>=10)
jquery_var('.landing-pagebg,.panel').css('font-size', curSize);
}else if(style == 'yellow'){
document.cookie = "fontStyle=yellow";
jquery_var("label, h1, h2, header,p, a, #selectedindividual, #selectedemployer,#navbar,.headtop,#footer,.colorScheme,.panel-heading,.panel-body,.panel-footer").removeClass("black");
jquery_var("label, h1, h2, header,p, a, #selectedindividual, #selectedemployer,#navbar,.headtop,#footer,.colorScheme,.panel-heading,.panel-body,.panel-footer").addClass("yellow");
}else{
document.cookie = "fontStyle=default";
jquery_var("label, h1, h2, header, p, a, #selectedindividual, #selectedemployer,#navbar,.headtop,#footer,.colorScheme,.panel-heading,.panel-body,.panel-footer").removeClass("black");
jquery_var("label, h1, h2, header, p, a, #selectedindividual, #selectedemployer,#navbar,.headtop,#footer,.colorScheme,.panel-heading,.panel-body,.panel-footer").removeClass("yellow");
}
}
</script>
<script>
jquery_var(document).ready(function(){
var fontStyle = getSelectedStyle('fontStyle');
if(fontStyle == 'black'){
jquery_var("label, h1, h2, p, a, #selectedindividual, #selectedemployer").addClass("black");
}else if(fontStyle == 'zoom'){
jquery_var("div, label, h1, h2, p, a").addClass("zoom");
}else if(fontStyle == 'zoomout'){
jquery_var("div, label, h1, h2, p, a").addClass("zoomout");
}else if(fontStyle == 'yellow'){
jquery_var("label, h1, h2, p, a, #selectedindividual, #selectedemployer").addClass("yellow");
}
});
function getSelectedStyle(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</script>
Note: You have to write the css for that particular tag & classes.