狼翔天地

簡單的來說它是一種語法，用來協助快速的改變套用整個網站版形外觀風格的一種方法！　在此格主先不多做介紹！往後在陸續PO上詳細的介紹！

網頁設計中往往會遇到這樣一個問題，不同使用者使用不同瀏覽器以及不同的解析度瀏覽網頁時

，使用者所看到的畫面與設計者的初衷有很大的出入，這是網頁設計師需要考慮的一個問題。

現在可透過javascript來達成根據瀏覽器和螢幕解析度調用不同的CSS代碼，代碼如下：

1. <script type="text/javascript">   
2. <!--   
3. if (window.navigator.userAgent.indexOf("MSIE")>=1)   
4. {   
5. var IE1024="";   
6. var IE800="";   
7. var IE1152="";   
8. var IEother="";   
9.   
10.   
11. ScreenWidth(IE1024,IE800,IE1152,IEother)   
12. }else{   
13. if (window.navigator.userAgent.indexOf("Firefox")>=1)   
14. {   
15. file://若瀏覽器為Firefox   
16. var Firefox1024="";   
17. var Firefox800="";   
18. var Firefox1152="";   
19. var Firefoxother="";   
20.   
21. ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)   
22. }else{   
23. file://若瀏覽器為其他類型   
24. var Other1024="";   
25. var Other800="";   
26. var Other1152="";   
27. var Otherother="";   
28. ScreenWidth(Other1024,Other800,Other1152,Otherother)   
29. }   
30. }   
31.   
32. function ScreenWidth(CSS1,CSS2,CSS3,CSS4){   
33. if ((screen.width == 1024) && (screen.height == 768)){   
34. setActiveStyleSheet(CSS1);   
35. }else{   
36. if ((screen.width == 800) && (screen.height == 600)){   
37. setActiveStyleSheet(CSS2);   
38. }else{   
39. if ((screen.width == 1152) && (screen.height == 864)){   
40. setActiveStyleSheet(CSS3);   
41. }else{   
42. setActiveStyleSheet(CSS4);   
43. }}}   
44. }   
45.   
46. function setActiveStyleSheet(title){   
47. document.getElementsByTagName("link")[0].href="style/"+title;   
48. }   
49. file://-->   
50. </script>   

解釋：
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";

引號內分別填入，使用者使用IE且解析度為1024*768,800*600,1152*864所要使用的css檔案名稱。

var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

引號內分別填入，使用者使用FireFox且解析度為1024*768,800*600,1152*864所要使用的css檔案名稱。

var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";

引號內分別填入，使用者使用其他類型且解析度為1024*768,800*600,1152*864所要使用的css檔案名稱。

不判斷解析度，僅判斷瀏覽器，達成依據瀏覽器類型自動調用不同CSS。

代碼如下：

1. <script type="text/javascript">   
2. <!--   
3. if (window.navigator.userAgent.indexOf("MSIE")>=1)   
4. {   
5. file://若瀏覽器為IE   
6. setActiveStyleSheet("default.css");   
7. }else{   
8. if (window.navigator.userAgent.indexOf("Firefox")>=1)   
9. {   
10. file://若瀏覽器為Firefox   
11. setActiveStyleSheet("default2.css");   
12. }else{   
13. file://若瀏覽器為其他類型   
14. setActiveStyleSheet("macrolong.css");   
15. }   
16. }   
17.   
18. function setActiveStyleSheet(title){   
19. document.getElementsByTagName("link")[0].href="style/"+title;   
20. }   
21. file://-->   
22. </script>   

解釋：

若瀏覽器為IE，則調用default.css

若瀏覽器為Firefox，則調用default2.css

若瀏覽器為其他類型，則調用macrolong.css

使用方法：將上述代碼放入</head>前面即可