JavaScript浏览器编程之——使用URL传递参数
default.css:
red.css:
代码
body {
background-color:#F0FFF0;
}
background-color:#F0FFF0;
}
blue.css:
body {
background-color:blue;
}
background-color:blue;
}
body {
background-color:red;
}
background-color:red;
}
white.css:
body {
background-color:white;
}
background-color:white;
}
ex9.html:
代码
1 <html>
2 <head>
3 <title>URL参数传递</title>
4 <style type="text/css">
5 * {margin:0}
6 body {text-align:center;min-width:760px}
7 div {padding:3px 3px 3px 3xp}
8 #main {width:360px;margin:0 auto;text-align:left;margin-top:30px}
9 </style>
10
11 <script type="text/javascript">
12 // URL参数
13 var search = document.location.search;
14 if(!search && search.length == 0) {
15 search = "default";
16 } else {
17 search = search.substring(1,search.length);
18 }
19 // 动态加载样式表
20 var style = "<link href='" + search + ".css' rel='stylesheet' />";
21 document.write(style);
22 </script>
23 </head>
24 <body>
25 <div id="main">
26 <div><a href="ex9.html">默认</a></div>
27 <div><a href="ex9.html?blue">蓝色</a></div>
28 <div><a href="ex9.html?red">红色</a></div>
29 <div><a href="ex9.html?white">白色</a></div>
30 </div>
31 </body>
32 </html>
2 <head>
3 <title>URL参数传递</title>
4 <style type="text/css">
5 * {margin:0}
6 body {text-align:center;min-width:760px}
7 div {padding:3px 3px 3px 3xp}
8 #main {width:360px;margin:0 auto;text-align:left;margin-top:30px}
9 </style>
10
11 <script type="text/javascript">
12 // URL参数
13 var search = document.location.search;
14 if(!search && search.length == 0) {
15 search = "default";
16 } else {
17 search = search.substring(1,search.length);
18 }
19 // 动态加载样式表
20 var style = "<link href='" + search + ".css' rel='stylesheet' />";
21 document.write(style);
22 </script>
23 </head>
24 <body>
25 <div id="main">
26 <div><a href="ex9.html">默认</a></div>
27 <div><a href="ex9.html?blue">蓝色</a></div>
28 <div><a href="ex9.html?red">红色</a></div>
29 <div><a href="ex9.html?white">白色</a></div>
30 </div>
31 </body>
32 </html>
