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

动态更换CSS文件案例--分辨率不同，调用不同的css文件方法

2010-11-14 22:37 483 查看
根据分辨率不同，调用不同的css文件方法不同浏览器调用不同CSS文件

将以下JS代码放入<head>和</head>标签内，此段JS代码作用是辨别浏览器分辨率

<SCRIPT LANGUAGE="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){
　　    file://如果浏览器为Firefox
　　    var Firefox1024="";
　    　var Firefox800="";
　    　var Firefox1152="";
　    　var Firefoxother="";
　    　ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
　　  }else{
　    　file://如果浏览器为其他
　　    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;
　　}
　　file://-->
　　</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。

调用不同CSS文件JS代码：

<SCRIPT LANGUAGE="javascript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
file://如果浏览器为IE
setActiveStyleSheet("default.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
file://如果浏览器为Firefox
setActiveStyleSheet("default2.css");
}else{
file://如果浏览器为其他
setActiveStyleSheet("newsky.css");
}
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
file://-->
</SCRIPT>


解释：

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

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

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

用法：放在<head></head>中即可。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航