现在的位置: 首页 > 综合 > 正文

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

2018年02月09日 ⁄ 综合 ⁄ 共 3492字 ⁄ 字号 评论关闭

方法一:(根据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>中加入以下代码即可实现:
<SCRIPT language=JavaScript>

var str = window.location.hostname

if(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) 

//如果浏览器为IE 
setActiveStyleSheet("default.css"); 
}else{ 
if (window.navigator.userAgent.indexOf("Firefox")>=1) 

//如果浏览器为Firefox 
setActiveStyleSheet("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>

抱歉!评论已关闭.