js CSS实现同一应用样式适应不同系统_不同系统展示的样式-优快云博客

本文介绍了一种通过JavaScript分析URL参数来动态加载不同CSS文件的方法，实现了根据不同系统平台请求加载相应样式的功能。此方法适用于多种开发语言和浏览器环境。

同一个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;}