The same web application may be called in different systems. Because different systems require different page styles, it involves dynamic adaptation of the original file page styles.
Key Point: According to the Request Parameters of different systems, different CSS files are loaded, and tags have the ID attribute;
Conventions are greater than configurations;
Different system conventions correspond to the CSS style file name. Based on requests from different system platforms, first use js to analyze the requested CSS parameter, use this parameter as the file name, and dynamically load it to the link on the requested page: href;
The test file is as follows:
Enteria.htmand enterproduct.htmare two inputs. csstest.htm represents the original file (it can be your other system, and CSS planning is not the same)
1.enteria.htm File
<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>
2.enterproduct.htm File
<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>
3.csstest.htm File
<Head> <title> CSS dynamic loading </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>
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;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
