同一个web应用，可能在不同的系统中调用，由于不同系统要求页面样式不一样，所以涉及到原始文件页面样式动态适应。
关键点: 根据不同系统平台请求参数,加载不同的css文件,标签是有id属性的；
约定大于配置；
不同系统约定对应css样式文件名,根据不同系统平台请求,首先用js分析出请求的css参数,并把这个参数作为文件名,动态加载到被请求页面的link:href；
测试文件如下：
enterIa.htm和enterProduct.htm是两个入口，csstest.htm代表原始文件（可以是你的其它系统，css规划就不太一样了）
1.enterIa.htm文件
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#toia').click(function() {
window.location.href = 'csstest.htm?sty=css_ia';
});
});
</script>
</head>
<body>
<div id="toia" style="cursor:pointer">投顾页面请求</div>
</body>
2.enterProduct.htm文件
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#toproduct').click(function() {
window.location.href = 'csstest.htm?sty=css_product';
});
});
</script>
</head>
<body>
<div id="toproduct" style="cursor:pointer">产品页面请求</div>
</body>
3.csstest.htm文件
<HEAD>
<TITLE>css 动态加载</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<link id="cs1" href="css_initial.css" rel="stylesheet" title="style1" type="text/css" />
<style type="text/css">
.lii{cursor:pointer;width:200px;}
</style>
</HEAD>
<BODY>
<h1>JS操作CSS样式. </h1>
<p>
<p>关键点: 根据不同系统平台请求参数,加载不同的css文件,<link>标签是有id属性的;
<p>约定大于配置;
<p>不同系统约定对应css样式文件名,根据不同系统平台请求,首先用js分析出请求的css参数,并把这个参数作为文件名,动态加载到被请求页面的link:href;
<p>这个方案可以在不同开发语言,平同平台,不同浏览器下使用;
</p>
<ul>
<li id="li1" class="lii">css_initial</li>
<li id="li2" class="lii">css_ia</li>
<li id="li3" class="lii">css_product</li>
</ul>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(function() {
//分析URL,提取传过来的样式参数,再根据样式参数不同,加载不同的css文件
var locurl = window.location.href; //获得页面的URL
//alert(locurl);
var startplace = locurl.indexOf('?'); //得到网址与参数分隔符的位置，用“？”分隔
if(startplace !=-1) {
//获得参数字符串，从分隔符位置+1处开始获取
var getit = locurl.substr(startplace + 1, locurl.length);
var endplace = getit.split('=');
//endplace[0]为key,endplace[1]为val
//改变样式方法1:
//固定key,取对应value
/*var val;
if(endplace[0]=='sty') {
val = endplace[1];
if(val =='css_ia') {
alert('进入默认为灰色背景,来自' + val + '页面,h1标题显示红字.');
//改变样式
$('#cs1').get(0).href = 'css_ia.css';
}
else if(val =='css_product') {
alert('进入默认为灰色背景,来自' + val + '页面,h1标题显示黑字,粗体.');
//改变样式
$('#cs1').get(0).href = 'css_product.css';
}
}*/
//(推荐此方法)改变样式方法2:
//约定Key,直接用key作css样式文件名
alert(endplace[1]+'.css');
$('#cs1').get(0).href = endplace[1]+'.css';
}
$('#li1').click(function() {
$('#cs1').get(0).href = $(this).html()+'.css';
});
$('#li2').click(function() {
$('#cs1').get(0).href = $(this).html()+'.css';
});
$('#li3').click(function() {
$('#cs1').get(0).href = $(this).html()+'.css';
});
});
//-->
</SCRIPT>
</BODY>
4.css_ia.css
body{color:#000}
h1{font-size:12px;color:red;font-weight:bold;}
p{font-size:13px;color:#001;}
5.css_initial.css
body{background:#ccc;
color:#fff}
h1{font-size:14px;
color:#fff;font-weight:bold;}
p{font-size:12px;
color:#fff;}
6.css_product.css
body{background:#fee;color:#000}
h1{font-size:19px;color:#000;font-weight:bolder;}
p{font-size:14px;color:#000;}