js CSS實現同一應用樣式適應不同系統

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More