根据浏览器和分辨率的不同调用相应CSS代码

时间:2011-06-19 01:22:08

根据浏览器和分辨率的不同调用相应CSS代码，这个可能应用不算特别广，但它也非常有实用性。今天小宇收集起来，方便自己和大家以后查阅。

JavaScript Code复制内容到剪贴板

  1. 〈SCRIPT LANGUAGE="javascript"〉    

  2. 〈!--    

  3. if (window.navigator.userAgent.indexOf("MSIE")〉=1)    

  4. {    

  5. var IE1024="";    

  6. var IE800="";    

  7. var IE1152="";    

  8. var IEother="";    

  9. ScreenWidth(IE1024,IE800,IE1152,IEother)    

  10. }else{    

  11. if (window.navigator.userAgent.indexOf("Firefox")〉=1)    

  12. {    

  13. file://如果浏览器为Firefox    

  14. var Firefox1024="";    

  15. var Firefox800="";    

  16. var Firefox1152="";    

  17. var Firefoxother="";    

  18. ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)    

  19. }else{    

  20. file://如果浏览器为其他    

  21. var Other1024="";    

  22. var Other800="";    

  23. var Other1152="";    

  24. var Otherother="";    

  25. ScreenWidth(Other1024,Other800,Other1152,Otherother)    

  26. }    

  27. }    

  28. function ScreenWidth(CSS1,CSS2,CSS3,CSS4){    

  29. if ((screen.width == 1024) && (screen.height == 768)){    

  30. setActiveStyleSheet(CSS1);    

  31. }else{    

  32. if ((screen.width == 800) && (screen.height == 600)){    

  33. setActiveStyleSheet(CSS2);    

  34. }else{    

  35. if ((screen.width == 1152) && (screen.height == 864)){    

  36. setActiveStyleSheet(CSS3);    

  37. }else{    

  38. setActiveStyleSheet(CSS4);    

  39. }}}    

  40. }    

  41. function setActiveStyleSheet(title){     

  42. document.getElementsByTagName("link")[0].href="style/"+title;     

  43. }    

  44. file://--〉    

  45. 〈/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="";

　　引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

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

　　引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

　　不判断分辨率，只判断浏览器

　　应E.Qiang提议，编如下代码。实现根据浏览器类型自动调用不同CSS。

　　代码：

JavaScript Code复制内容到剪贴板

  1. 〈SCRIPT LANGUAGE="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("newsky.css");    

  15. }    

  16. }    

  17. function setActiveStyleSheet(title){     

  18. document.getElementsByTagName("link")[0].href="style/"+title;     

  19. }    

  20. file://--〉    

  21. 〈/SCRIPT〉   

  22.   

解释：如果浏览器为IE，则调用default.css

如果浏览器为Firefox，则调用default2.css

如果浏览器为其他，则调用newsky.css

用法：放在</head>前面即可。
 

本站所有文章均为天行博客原创，转载请注明来源及出处！

作者：宇天行 （关于我）

本文首发地址：https://www.huceo.com/post/235.html

分享到： 复制网址 腾讯微博 新浪微博 微信 QQ空间

或许您还会喜欢这些文章：

Tags: 作者:宇天行 | 分类:开发技术 | 评论:14 | 浏览:4796

您正在以游客身份发表评论：

必填

选填

选填

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。