jquery改变字体和背景颜色js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery改变字体和背景颜色js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<title>jQuery cookie���汳����ɫ��������ɫ������</title>
<style type="text/css">
body{font-size:14px;}
div{margin:20px;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
#content{width:500px;margin:0 auto;
border:#CCC 1px solid}
#content p{text-indent:2em;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
var options = {path: '/', expires: 10};			//����·��������ʱ��Ϊ10��
var cookie_backColor = $.cookie("backColor");	//���屳����ɫֵ
var cookie_fontColor = $.cookie("fontColor");	//����������ɫֵ
var cookie_fontSize = $.cookie("fontSize");		//���������С

//���cookie���б�����ɫ��������ɫ�������С���ͼ�����Ӧ���ԡ�
$(function(){
	if(cookie_backColor){
		$('body').css('background', cookie_backColor);
	}
	if(cookie_fontColor){
		$('#content').css('color', cookie_fontColor);
	}
	if(cookie_fontSize){
		$('#content').css('font-size', cookie_fontSize + 'px');
	}
});

//������ɫ����
function backcolor(num){
	if(num == 1){
		$("body").css('background','#E6FBEA');		//�ı䱳����ɫ
		$.cookie("backColor", "#E6FBEA", options);	//�ѱ�����ɫֵ����"backColor"���cookie��
	}
	if(num == 2){
		$("body").css('background','#D8ECED');
		$.cookie("backColor", "#D8ECED", options);
	}
	if(num == 3){
		$("body").css('background','#FDFCEA');
		$.cookie("backColor", "#FDFCEA", options);
	}
	if(num == 4){
		$("body").css('background','#EFEFEF');
		$.cookie("backColor", "#EFEFEF", options);
	}
}

//������ɫ����
function fontcolor(num){
	if(num == 1){
		$("#content").css('color','#f00');		//�ı�������ɫ
		$.cookie("fontColor", "#f00", options);	//��������ɫֵ����"fontColor"���cookie��
	}
	if(num == 2){
		$("#content").css('color','#ff0');
		$.cookie("fontColor", "#ff0", options);
	}
	if(num == 3){
		$("#content").css('color','#00f');
		$.cookie("fontColor", "#00f", options);
	}
	if(num == 4){
		$("#content").css('color','#0f0');
		$.cookie("fontColor", "#0f0", options);
	}
}

//�����С����
function fontsize(num){
	switch(num){
		case 1:
			$("#content").css('font-size','12px');	//�ı������С
			$.cookie("fontSize", "12", options);	//�������Сֵ����"fontSize"���cookie��
			break;
		case 2:
			$("#content").css('font-size','14px');
			$.cookie("fontSize", "14", options);
			break;
		case 3:
			$("#content").css('font-size','16px');
			$.cookie("fontSize", "16", options);
			break;
		case 4:
			$("#content").css('font-size','18px');
			$.cookie("fontSize", "18", options);
			break;
	}
}

//�ָ�Ĭ�Ϸ���
function defaultCL(){
	$("body").css('background','');			//��ձ�����ɫ
	$.cookie("backColor", null, options);	//�ѱ�����ɫ��ֵ����"backColor"���cookie��
	$("#content").css('color','');			//���������ɫ
	$.cookie("fontColor", null, options);	//��������ɫ��ֵ����"fontColor"���cookie��
	$("#content").css('font-size','');		//��������С
	$.cookie("fontSize", null, options);	//�������С��ֵ����"fontSize"���cookie��
}
</script> 

</head>

<body style="text-align:center">

<h2><a href="#" target="_blank">jQuery cookie���汳����ɫ��������ɫ�������С</a></h2> 
<div class="backColor">
	������ɫ��
	<a title="��ɽ����" onclick="backcolor(1)" href="javascript:void(0);">��</a>��
	<a title="��ɫ����" onclick="backcolor(2)" href="javascript:void(0);">��</a>��
	<a title="�����忡" onclick="backcolor(3)" href="javascript:void(0);">��</a>��
	<a title="��ɫ����" onclick="backcolor(4)" href="javascript:void(0);">��</a>
</div>
<div class="fontColor">
	������ɫ��
	<a onclick="fontcolor(1)" href="javascript:void(0);">��</a>��
	<a onclick="fontcolor(2)" href="javascript:void(0);">��</a>��
	<a onclick="fontcolor(3)" href="javascript:void(0);">��</a>��
	<a onclick="fontcolor(4)" href="javascript:void(0);">��</a>
</div>
<div class="fontSize">
	�����С��
	<a onclick="fontsize(1)" href="javascript:void(0);">12px</a>��
	<a onclick="fontsize(2)" href="javascript:void(0);">14px</a>��
	<a onclick="fontsize(3)" href="javascript:void(0);">16px</a>��
	<a onclick="fontsize(4)" href="javascript:void(0);">18px</a>
</div>
<div class="default">
	<a onclick="defaultCL()" href="javascript:void(0);">�ָ�Ĭ��</a>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)