修改样式的方案

1，修改样式的calss

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $div = $('.box');
			$div.click(function () {
				// 在原来样式名的基础上加上“big”的样式名
				// 在原来样式名的基础上去掉“red”的样式名
				$div.addClass('big');
				$div.removeClass('red');

//				if($('.box').hasClass('col01'))
//				{
//					$('.box').toggleClass('col02');
//				}
//				else
//				{
//					$('.box').toggleClass('col01');
//				}
			})
		})
	</script>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			background-color:gold;
		}
		.big{
			font-size:30px;
			color: #09E0B5;
		}
		.red{
			color:red;
		}
	</style>

2.引入css 的link可以打上id 通过切换link的href来切换css样式

<link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01">
<script type="text/javascript">
	window.onload = function(){
		var oBtn01 = document.getElementById('btn01');
		var oBtn02 = document.getElementById('btn02');
		var oLink = document.getElementById('link01');

		oBtn01.onclick = function(){
			oLink.href = "css/skin01.css";
		}
		oBtn02.onclick = function(){
			oLink.href = "css/skin02.css";
		}
	}