您的位置：首页 > Web前端 > CSS

用js实现根据不同的分辨率和浏览器调用不同的css文件

2017-11-28 17:04 891 查看
方法一：（根据ID设定）<script language="Javascript"><!--if (screen.width == "800"){document.getElementById("MyCSS").href="800.css";document.getElementById("xinxi").innerHTML="你的分辨率是800，系统自动为你处理为最佳显示模式。";}else if (screen.width == "1024"){document.getElementById("MyCSS").href="1024.css";document.getElementById("xinxi").innerHTML="你的分辨率是1024，系统自动为你处理为最佳显示模式。";}else if (screen.width == "1280"){document.getElementById("MyCSS").href="1280.css";document.getElementById("xinxi").innerHTML="你的分辨率是1280，系统自动为你处理为最佳显示模式。";}else if (screen.width == "1366"){document.getElementById("MyCSS").href="1366.css";document.getElementById("xinxi").innerHTML="你的分辨率是1366，系统自动为你处理为最佳显示模式。";}else{document.getElementById("MyCSS").href="1024.css";document.getElementById("xinxi").innerHTML="你的分辨率未加入到系统列表中，系统自动为你分配成1024模式，如有建议请联系我们。";}//--></script>
方法二：(根据来访域名（或者分辨率）自动选择不同的CSS样式)if(window.screen.width==1280){document.write("<link href='css/default1280.css' rel='stylesheet' type='text/css'>");}if(window.screen.width==800){document.write("<link href='css/default800.css' rel='stylesheet' type='text/css'>");}  方法三：(根据来访域名（或者分辨率）自动选择不同的CSS样式)根据来访域名来自动选择CSS样式例如一个网站有两个域名a.com和b.com用户访问a.com的时候显示a.css，访问b.com时显示b.css。也可以根据不同的屏幕分辨率来选择CSS样式的，在<head>和</head>中加入以下代码即可实现：<SCR4000IPT language=JavaScript>var str = window.location.hostnameif(str =="mail.hnndyy.com"){document.write("<link href=\"/img/hnndyy.css\" rel=\"stylesheet\" type=\"text/css\">" )}if(str =="mail.powerpigs.net"){document.write("<link href=\"/img/style.css\" rel=\"stylesheet\" type=\"text/css\">" )}</script>方法四：用js实现根据不同的分辨率和浏览器调用不同的css文件: 
定义以下js变量,做分辨率的尺寸判断.var IE1024="";var IE800="";var IE1152="";var IEother="";　引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。　　var Firefox1024="";var Firefox800="";var Firefox1152="";var Firefoxother="";引号里面分别填写，用户使用forefox的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。　　var Other1024="";var Other800="";var Other1152="";var Otherother="";引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。不判断分辨率，只判断浏览器代码如下：<SCRIPT type="text/javascript">if (window.navigator.userAgent.indexOf("MSIE")>=1){//如果浏览器为IEsetActiveStyleSheet("default.css");}else{if (window.navigator.userAgent.indexOf("Firefox")>=1){//如果浏览器为FirefoxsetActiveStyleSheet("default2.css");}else{//如果浏览器为其他setActiveStyleSheet("newsky.css");}}function setActiveStyleSheet(title){document.getElementsByTagName("link")[0].href="style/"+title;}</SCRIPT> 
解 释：如果浏览器为IE，则调用default.css如果浏览器为Firefox，则调用default2.css如果浏览器为其他，则调用newsky.css用法：放在<head></head>中即可。<SCRIPT type="text/javascript">if (window.navigator.userAgent.indexOf("MSIE")>=1){　var IE1024="";　var IE800="";　var IE1152="";　var IEother="";　ScreenWidth(IE1024,IE800,IE1152,IEother)}else{if (window.navigator.userAgent.indexOf("Firefox")>=1){　//如果浏览器为Firefox　var Firefox1024="";　var Firefox800="";　var Firefox1152="";　var Firefoxother="";　ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)}else{　//如果浏览器为其他　var Other1024="";　var Other800="";　var Other1152="";　var Otherother="";ScreenWidth(Other1024,Other800,Other1152,Otherother)}}function ScreenWidth(CSS1,CSS2,CSS3,CSS4){if ((screen.width == 1024) && (screen.height == 768)){setActiveStyleSheet(CSS1);}else{if ((screen.width == 800) && (screen.height == 600)){setActiveStyleSheet(CSS2);}else{if ((screen.width == 1152) && (screen.height == 864)){setActiveStyleSheet(CSS3);}else{setActiveStyleSheet(CSS4);}}}}function setActiveStyleSheet(title){document.getElementsByTagName("link")[0].href="style/"+title;}</SCRIPT>
转载：http://blog.csdn.net/grief_of_the_nazgul/article/details/26689695
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航